module: add --experimental-strip-types by marco-ippolito · Pull Request #53725 · nodejs/node It is possible to execute TypeScript files by setting the experimental flag --experimental-strip-typ... 💁♀️ まだマージされてない点に注意してください --experimental-strip-typesというフラグを実行時に付けることにより、Node.jsでTypeScriptのコードを実行できるようになるPRが出てきました。 背景 TC39でも型注釈の話題(議事録を読むとブラウザとの兼ね合いもあり道のりは長そう)が存在するほどJSのコードにおいて、型は当たり前となっています。 Node.jsと同
TypeScript 5.5で、@graphemeclusterさんによって正規表現リテラルの構文チェックが導入されました🎉 この構文チェックによって、正規表現に間違いがあった場合、事前にTypeScriptがエラーを出力してくれます。 この機能について、次のことが気になったので調べてみました。 どんな構文がエラーになるか なぜ導入されたか どうやってチェックしているか JavaScriptで実行できるがTypeScriptでエラーになる構文はあるか ESLintとのカバー範囲の違い 本記事に関して、誤り等があれば指摘いただけると嬉しいです。 どんな構文がエラーになるか TypeScript 5.5では、正規表現に関するエラーメッセージが40個程度追加されています。 例えば、下記のような構文は、5.5でエラーになります。 // 存在しないフラグ var re = /a/b; // エラー
Modern Emacs Typescript Web (React) Config with lsp-mode, treesitter, tailwind, TSX & more - Ovi Stoica
Table of Contents Introduction Part 1: Treesitter for Typescript & TSX LSP Support Completion setup Linter setup LSP Setup Eslint (Optional) Tailwind LSP Server LSP Performance Emacs LSP Booster Structural editing Formatting buffers with Prettier Other resources Conclusion Introduction I've worked within the JS ecosystem for the past 8 years using editors like Webstorm and VSCode, I started using
STORES 予約 エンジニアの水野です。STORES 予約 の店舗管理画面で利用しているTypeScriptをv4.8からv5.5にアップグレードしたので追加された主な機能をおさらいしようと思います。 satisfies (v4.9) v4.9で実装されました。 型アノテーションのように型付けしつつ型推論も行う演算子です。 例を見てみましょう。 type Color = 'red' | 'green' | 'blue' const pallet: Record<Color, string | number[]> = { red: [255, 0, 0], green: '#00ff00', blue: '#0000ff', } // pallet.red => string | number[] pallet.redの型はstring | number[]となっています。これはRecor
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
OpenAPI TypeScript
OpenAPI TypeScriptConvert OpenAPI 3.0/3.1 schemas to TypeScript types and create type-safe fetching.
TypeScript 5.5で導入されたisolatedDeclarationsは、JavaScriptエコシステムを大きく変えるゲームチェンジャーかもしれない
7月7日、Denoの開発者マーヴィン・H氏が「JavaScriptエコシステムを加速する（Speeding up the JavaScript ecosystem）」と題した記事を公開した。この記事では、TypeScriptの新機能「isolatedDeclaration」が、JavaScript / TypeScriptエコシステムを変革する可能性について詳細に紹介されている。本記事ではその内容を簡単に紹介する。 本記事は、以下のエキスパートの皆様に監修していただきました: 古川陽介さん（Japan Node.js Association代表理事） うひょさん（株式会社カオナビ フロントエンドエンジニア） npmパッケージングの問題点 現在npmでのパッケージングプロセスは相当に複雑である。モジュールをnpmに公開しようとする開発者は、CommonJS対ESMの問題や、多くの設定調整を行
Today we’re excited to announce the release of TypeScript 5.5! If you’re not familiar with TypeScript, it’s a language that builds on top of JavaScript by making it possible to declare and describe types. Writing types in our code allows us to explain intent and have other tools check our code to catch mistakes like typos, issues with null and undefined, and more. Types also power TypeScript’s edi
GitHub - antfu/utils: Collection of common JavaScript / TypeScript utils
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
GitHub - webpod/graphql-megaera: GraphQL to TypeScript Generator
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
TL;DR この度、unplugin-typia という Library を作りました unplugin-typia を使うと今までめんどくさかった Typia の導入が簡単になります Vite、esbuild、webpackなどフロントエンドで主流の様々なbundlerに対応しています Next.jsでも簡単に使えます Bunにも対応しています はじめに 皆さんはTypeScriptでのValidationにはどのような Library を使っていますか？ zodはエコシステムが硬いし、最近だとvalibotが流行りつつありますね。 またarktypeも注目に値するLibraryです。 typeboxも耳にする機会が増えてきました。 また個人的には（厳密にはValidatorではないですが)、unknownutilも手に馴染んでよく使っています。 既存のValidation Librar
参加者2000人超え！ TypeScript大規模カンファレンス「TSKaigi 2024」レポート 2024年5月11日、中野セントラルパークカンファレンスにてTSKaigi 2024が開催されました。TSKaigiは今年初めて開催されたTypeScriptに特化した技術カンファレンスです。前身もない、完全初開催にも関わらずチケットはタイムテーブル公開前に完売。オンライン参加者も含めると2000人を超えるなど、とても注目度が高いカンファレンスとなりました。 今回筆者は運営スタッフとして参加しました。この記事では、TSKaigiがどのようなイベントだったのかに触れたうえで、当日の模様をレポートします。 TSKaigiついて TSKaigiは、日本最大級のTypeScriptをテーマとした技術カンファレンスです。コロナ禍で様々なオフラインイベントが打撃を受ける中、TypeScriptを扱うエ
gizm000 @ShiraishiTk 今日はこちら参加して、久々にフロントエンドの話しようと思っております😆 @samurai_se さん、開催ありがとうございます！今日は終わった後も時間あるので、ぜひお話させてください✨ TypeScript Meet Up #1 kobets.connpass.com/event/320697/ #kobets
Kobe.tsとは TypeScriptとその周辺知識についての勉強会を開催していくコミュニティです。 なので、フロントエンドに限らず、node.js, Deno, Nest,js, Freshなどのバックエンドや、Firebase,Cloudflare,VercelなどのSaaS、npm,pnpm,Biome,tailwindCSS,Figmaなども取り扱うトピックの範囲です。 記事執筆時点でですが、立ち上げから3週間で既にメンバーが80人になりました。 神戸在住な方に限らず、ぜひメンバーになるボタンだけでも押していってください！！！ なぜ神戸？ 生まれてこのかた約30年、ずっと神戸に住んでいるからです。おそらくこれからも住み続けます。 そう断言できるのは、もちろん私が神戸を気に入っているからというのもありますが、職場が神戸にある妻と結婚したからです。 ソフトウェアエンジニアとしての性が
Support typescript with --experimental-strip-types · Issue #208 · nodejs/loaders
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
TypeScriptユーザーに贈るGleam入門
最近v1に到達したGleamという静的型付けな関数型言語があります。 GleamはErlangとJavaScriptをターゲットに実行できるため、今TypeScriptを使っている領域でも使うことができます。 この記事ではTypeScriptユーザー向けにGleamの文法を解説していきます。 記事を通してGleamの良さを感じていただければ幸いです。 Gleamの公式サイトでは以下の言語のユーザー向けのチートシートもあるため、この中に知っている言語があるのならそちらを読んでみるのがオススメです。 Elixir Elm Erlang PHP Python Rust また、個人的にGleamの情報をCosense(Scrapbox)にまとめているので、リファレンスがてら覗いてみてください。 organizationとして管理していきたいと考えているので、編集のリクエスト等も歓迎です。 編集した
JSer.info #697 - Nuxt 2は2024年6月30日でEnd-of-Life (EOL)となることが発表されました。 Nuxt 2 End-of-Life (EOL) · Nuxt Blog Nuxt 2.xの最終版となる2.18.0が6月末にリリースされる予定となっていて、それ以降はセキュリティアップデートも公式には提供されなくなります。 TypeScript 5.5がリリースされました。 Announcing TypeScript 5.5 - TypeScript TypeScript 5.5では、関数からtype predicatesを推論できるようになり、Array.prototype.filterなどでの絞り込みが簡潔に書けるようになっています。 また、Stage 3のSet Methodsをサポート、JSDocで@import {foo} from "foo"を
集合で理解する Typescript
🌼 はじめに 私は高校の数学時間に初めて集合について教わりましたが、その時は全然知らなかったです。まさか Typescript に集合の知識を活かす日が来るとは、、 ということで今回は集合の観点で理解する Typescript について語ります。 1. 型は値の集合 変数には色んな種類の値を割り当てることができ、Typescript なので型を持ちます。 const A: number = 42 const B: null = null const C: undefined = undefined const D: string = 'Canada' const E: boolean = true const F: number[] = [1, 2, 3, 4] const G: { [k: string]: string} = { name: "name" } 集合的に考えると、型は割
Vue3のdefineModelで、オブジェクト値を双方向バインディングした時に起きた型エラーを解消する（TypeScript）
<script setup lang='ts'> const modelValue = ref({ name: '', email: '', }) </script> <template> <ChildComponant v-model="modelValue" /> </template>
TypeScriptコードを直接実行したい（ts-node、esbuild-register、tsx） - CLOVER🍀
これは、なにをしたくて書いたもの？ Node.jsでソースコードを書く時は基本的にTypeScriptにしたいのですが、時々ちょっとしたスクリプトを書きたい時もあったりします。 そういう時は、ちゃんとした設定などは特に用意せず、さっと書いてそのまま実行したいのですが、そういう時はどういう手段が あるのかなと思って、調べてみることにしました。 やりたいこと TypeScriptファイルを実行時に直接トランスパイル、実行したいわけですね。 選択肢としては、ts-node、esbuild-register、tsxがあるようです。 今回はそれぞれをあまり深追いせず、さらっと見ていく感じにします。求めている用途がそういう傾向なので。 ただ、実行速度は気になるので、そこは動作時に合わせて見ていきたいと思います。 ts-node ts-nodeは、Node.jsのTypeScript実行エンジン、REP
はじめに 現在 https://snkrdunk.com/ では、多くのWebアプリケーションにおいて、webpackを利用してマルチページアプリケーション（MPA）の構成でFrontendの実装をしています。 エントリーポイントは100を超え、その大半がVue.jsとJavaScript、TypeScriptを組み合わせて実装されています。 今回は、そんな環境の依存関係を紐解くべく調査のためのscriptを作成したお話になります。 エントリーポイントごとの依存関係をJSON形式で生成 [ { "entryPointPath": "src/entryPointA.js", "dependencies": [ "vue", "vue-router", "src/moduleA.js", "src/moduleB.js" ] }, { "entryPointPath": "src/entryP
GitHub - sebastianwessel/quickjs: A typescript package to execute JavaScript and TypeScript code in a webassembly quickjs sandbox
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - openapi-ts/openapi-typescript: Generate TypeScript types from OpenAPI 3 specs
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
refactor: New file doesn't work · Issue #58897 · microsoft/TypeScript
Try refactoring createIssueSchema variable to a new file 2024-06-12 09:20:14.898 [error] <semantic> TypeScript Server Error (5.5.0-dev.20240505) Debug Failure. Error: Debug Failure. at Object.addImportFromExportedSymbol (c:\Users\ASUS\.vscode\extensions\ms-vscode.vscode-typescript-next-5.5.20240505\node_modules\typescript\lib\typescript.js:154711:32) at c:\Users\ASUS\.vscode\extensions\ms-vscode.v
WordPress + Vue.js 3.2 + TypeScript の開発環境を Docker Compose を使って用意する
Vue.js を使っていると Firebase のような BaaS だったり Serverless な環境ばかりになっていて、バックエンドの環境構築をする機会がしばらくありませんでした。 久しぶりに WordPress を扱うことになり、せっかくなので利用機会の少ない Docker Compose を使って環境構築をしようかなと。 WordPress で構築したサイト内で JavaScript で実装したい機能がいくつかあるので Vue.js 3.2 を動かすところまでやってみましたので一連の流れを記録しておきます。 環境構築の全体的な流れ WordPress は Docker Compose で WordPress は PHP, MySQL で動作しているため、普段使いの Mac に 少なくとも MySQL を入れる必要があります。また PHP が入っていることは知っていますが、バージョ
ベクトルデータベース Weaviate入門 〜セットアップからハイブリッド検索まで〜（TypeScript版） - Qiita
はじめに ベクトルデータベース、触っていますか？ GPTを筆頭とするLLMの浸透とともに、データベースの世界で存在感を増しているのが、「ベクトルデータベース」。AIの根幹にある埋め込み（Embedding) によって生成したベクトル値を扱うのに特化したデータベースです。 Googleトレンドで"vector database"を見てみると、Chat GPTを追うようにスパイクしているのがわかります。 出典：Googleトレンド 私もOpenAIのEmbeddings APIを使ってデータをベクトル化して保存したり、LangChainのVectorstore Agentでお問い合わせbotを作ってみたり、自前で作ったChatGPT Retrieval Pluginと接続させてみたりと、Chat GPTをきっかけにベクトルデータベースで遊ぶようになりました。 これまでベクトルデータベースとして
ESLint v9 Support · Issue #8211 · typescript-eslint/typescript-eslint
Edit (JoshuaKGoldberg, May 12th): now that #9002 is merged, the v8 versions of typescript-eslint starting with v8.0.0-alpha.10 now support ESLint v9. Hooray! 🙌 If you still have problems with typescript-eslint and ESLint v9: Please make sure you're using typescript-eslint@8.0.0-alpha.10 or newer Go through our issue chooser to file a new issue reporting your problems That issue template includes
前提条件 TypeScriptを使用している package.jsonは1つのみ 今回対象とするディレクトリのルートにpackage.jsonがあり、それより子のディレクトリにはpackage.jsonがない モノレポではなくモノリスのイメージ。モノレポであれば恐らくworkspaceを切る方が何かと素直になりそう 試した環境 Visual Studio Code version 1.91(2024年7月7日頃の最新バージョン) やりたいこと ディレクトリ毎に依存方向を決めている場合等に、依存してはいけないディレクトリの関数や変数が自動補完の対象となるのを防ぎたい 今回検証するリポジトリの構成 ルートディレクトリにpackage.jsonとtsconfig.jsonがある（ここは通常通り） srcの直下にはconstants, utils, featuresというディレクトリがある fea
Total TypeScript: Essentials is a book for devs of all levels to learn advanced type manipulation and real-world application development patterns in TypeScript.Start Reading → JavaScript's developer experience has left you wanting more. With only basic autocompletion, limited refactoring support, and the constant fear of runtime errors, it was time to make the change. You have chosen wisely. But g
import type { Meta, StoryObj } from '@storybook/react'; import Button from './Button'; const meta: Meta<typeof Button> = { component: Button, }; export default meta; ... 変換したい箇所と内容をまとめると以下の通りです。 @storybook/react の import 文に Meta を追加する export default のオブジェクトを meta 変数に変更し、型注釈を設定する 相対パスで import しているコンポーネントの型を指定する export default を meta オブジェクトに変更する コンポーネントの型が動的に変わりますが、変更内容は共通しているため、AST を使って一気に変換できそうです。
現場で使えるTypeScript詳解実践ガイド (Compass Programming) | NDLサーチ | 国立国会図書館
資料詳細 要約等： これさえあれば、TypeScriptで困らない！（提供元: 出版情報登録センター（JPRO））著者紹介： 菅原浩之 著者：菅原 浩之（すがはら ひろゆき） 1987年、兵庫県姫路市生まれ。2012年、北海道大学応用物理学専攻修了。同年、大手電気機器メーカーに入社。産業用光源の光学設計や熱設計に携わり、欧米向けの製品開発の主担当として設計や海外製造ラインの立ち上げに従事。 趣味で始めたプログラミング学習を...すべて見る
RabbitMQのJavaScriptチュートリアルの「Hello World!」をTypeScriptで試す - CLOVER🍀
これは、なにをしたくて書いたもの？ この前、Ubuntu Linux 22.04 LTSにRabbitMQをインストールしてみました。 Ubuntu Linux 22.04 LTSにRabbitMQをインストールする - CLOVER🍀 RabbitMQを見直すのとTypeScriptの学習も兼ねて、JavaScriptクライアントを使ったRabbitMQのチュートリアルをやってみたいと 思います。 RabbitMQのJavaScript／Node.jsクライアント 今回、対象としたいチュートリアルはこちらです。 RabbitMQ tutorial - "Hello World!" — RabbitMQ こちらのチュートリアルでは、amqplibが使われています。 amqplib | AMQP 0-9-1 library and client for Node.JS 他のJavaScri
E2E テストの決定版！ テスト開発の効率が爆上がりする Playwright (TypeScript版) - Qiita
E2E テストの決定版！ テスト開発の効率が爆上がりする Playwright (TypeScript版)フロントエンドVisualStudioCodeE2EテストCypressPlaywright E2E テストスイート Playwright はマイクロソフトが提供しているだけあって Visual Studio Code と高いレベルで統合されています。 E2E テストをステップ実行することができ、変数の値を参照（インスペクト）できます。もちろん、ブラウザーの様子も同時に確認できます。 現在テストがどこを実行中なのかがテストコードにリアルアイムに強調表示されるので、どこで意図せずに止まっているかがすぐに分かります。この機能は追うのが難しい非同期処理にも対応しているので非常に助かります。 テストを動かさなくてもコードにマウスを合わせるだけで、対応する GUI 部品がどこにあるかがすぐに分か
はじめにこんにちは、SHIFTの開発部門に所属している Katayama です。 TypeScript の型定義において、その型（type hoge = {...}）を"export default"（デフォルトエクスポート）している場合に、Node.js にコンパイルして実行した際に、以下のようなエラーが出てしまった。 $ node build/app.js /home/study/workspace/ts-node-oidc/build/app.js:4 const result = (0, kebabcase_keys_1.default)({ foo_bar: 'baz', nested: { foo_Baz: new Date() } }, { deep: true }); ^ TypeError: (0 , kebabcase_keys_1.default) is not a
名著「Javaによる関数型プログラミング」のStrategyパターンをTypeScriptで表現してみた。
初めに Strategyパターンは英語で"戦略"を意味する言葉になります。 事前に"戦略"を定義して状況に応じて既存のコードを変更することなく "戦略"を切り替えることができるデザインパターンになります。 ※Strategyパターンの基本は こちらの記事 をご参照ください。 通常のオブジェクト指向デザインパターンではインターフェースを定義して 継承先の具象クラスで戦略を定義するのが一般的ですが、 関数型プログラムを利用するとわざわざインターフェースや 具象クラスを定義せずにすっきり書くことができます。 本項は 名著「Javaによる関数型プログラミング」で紹介されている StrategyパターンをTypeScript歴数日の筆者が勉強をかねて TypeScriptに移行してみるという趣旨になります。 ※少し本書籍の内容も振り返ります。 おことわり 筆者は元々Java人間です。 TypeScr
react + typescript において data fetch や reload を行う際に、loading 中は placeholder などを表示し、loading が終わったらデータを表示する、というようなことはよくやると思いますが、その際に loading の true/false と、fetch したデータが取得できているか（undefined でないかどうか）を両方チェックしていると、コードが冗長になりがちです。 ということで、これをいい感じに扱える hooks を作成しました。 なお Suspence は利用しない時代の話です。 作成した hooks import { useState, useCallback } from "react"; export const useWithLoading = <P extends unknown[], R>( fn: (...
ROLLUP + SVELTE + TYPESCRIPTの環境構成[2023/9版] RightTouchのプロダクトは様々な技術を用いて開発されています。特にフロントエンドに関しては既存の技術スタックにとらわれず必要に応じて新しい技術を取り入れているため、同じプロダクトの中でも機能によって複数のフレームワークが使い分けられたりしています。 この記事ではSvelteとTypescriptのコー
firebaseのStorageの指定フォルダからファイルを取得( Vue, Nuxt, TypeScript)
firebaseのStorageの指定フォルダからファイルを取得 こちらを業務でやることになったので備忘録でかきこ チートシート目的ですね。 公式にすべて記載あり firebaseの公式に記載ありますが、こちとら業務で取得確認までしなきゃなのでやり方を下記に記載して自身のやり方を残しておきます。 取得はコンソールのStorageに記載あるgs://hogehoge~~.comを利用して取得 今回はちょっと変わっていて指定フォルダ先にあるCSVファイルを全取得します。 ファイル名は日付_test.csvで登録されているものとします。 ex) 202406291230_test.csv 普段であれば、下記path指定すれば必要とするファイルがとれますが、今回は最新のものを取りたいので全件取得で比較することになりました。 import { getDownloadURL, getStorage,
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Node.jsでTypeScriptのコードを実行できるようになるかも - hiroppy's site
TypeScript 5.5 で追加された正規表現構文チェックを理解する
TypeScript v4.9からv5.5で追加された機能のおさらい - STORES Product Blog
TypeScriptに導入された新たな仕組みのデコレータ、その使い方と利便性とは？
Announcing TypeScript 5.5 - TypeScript
TypeScriptに導入された新たな仕組みのデコレータ、その使い方と利便性とは？
TypeScriptの型システムに命を吹き込む: Typia と unplugin-typia
参加者2000人超え！ TypeScript大規模カンファレンス「TSKaigi 2024」レポート | gihyo.jp
Kobe.ts TypeScript Meet Up #1 を開催しました！
神戸でKobe.tsというTypeScriptコミュニティを立ち上げた話
2024-06-22のJS: Nuxt 2 EOL、TypeScript 5.5、State of JavaScript 2023の結果
TypeScriptを使って、エントリーポイントに紐づくts, js, vueの依存関係を追う
ディレクトリ単位でTypeScriptの自動補完を制御する
Total TypeScript Essentials
大量のコードを TypeScript の AST で一気に置き換えよう
はじめに｜【2024年】React, TypeScript, Tailwind CSSでTodoアプリを作ろう
TypeScriptでexport defaultにする際の注意事項と解決方法｜SHIFT Group 技術ブログ
react + typescriptでloadingをいい感じに扱うhooksを作った
Rollup + Svelte + Typescriptの環境構成