1-3. 作成したスキーマから型を取り出したい (infer / shape / element / keyof)
今日開催の「TechFeed Experts Night#11 〜 JavaScript/TypeScript最前線」で発表した資料です。 https://techfeed.io/events/techfeed-experts-night-11 Zennの記事はこちら https://ze…
const animal: Animal = { animal: "string", }; const dog: Dog = { animal: "string", dog: "string", }; いま,Dog <: Animalです. <:という記号は2つの型のあいだに書いて,「左の型が右の型のサブタイプである」と読みます. TypeScriptの型システムは構造的なので,2つのオブジェクトがサブタイプ関係にあるには,それらに共通するプロパティについてもまた,サブタイプ関係が必要1です. 今回の例では,DogとAnimalに共通するanimalプロパティについてstring <: stringなのでOKです. TSでは,T型の変数にS型の値を代入する際、S <: Tが検査されます。 例えば,Animal型の変数にDog型の値を代入する際,Dog <: Animalが検査されますが,こ
これは ZOZO Advent Calendar 2022 カレンダー Vol.3 の 10日目の記事です。 ts-node 便利ですよね。 TypeScriptで書いてトランスパイルをしないで動かせるので簡単なスクリプトやデバッグで用いることがあると思います。 でも、遅いですよね。 そんなあなたにtsx tsxといっても App.tsx みたいな TypeScript+JSX の話ではないです。 tsxとは ts-nodeのように使えるコマンドです。 内部的にはトランスパイルにesbuildが用いられており、ts-nodeより早く速くTypeScriptファイルを実行できます。 v.s. esbuild-register ts-nodeより早くてTypeScriptを実行するesbuildなパッケージにesbuild-registerというものもあります。(ほかにも様々ありますが検索した
type CartesianProductElement<T extends unknown[][]> = T extends [] ? [] : T extends [Array<infer V>, ...infer W extends unknown[][]] ? [V, ...CartesianProductElement<W>] : []; export function* cartesian<T extends unknown[][]>( ...args: T ): Generator<CartesianProductElement<T>, void, undefined> { if (args.length === 0) yield [] as any; else { const [head, ...rest] = args; for (const h of head) { c
At the heart of most useful programs, we have to make decisions based on input. JavaScript programs are no different, but given the fact that values can be easily introspected, those decisions are also based on the types of the inputs. Conditional types help describe the relation between the types of inputs and outputs.
curryhoward2020.md この記事はTSG Advent Calendar 2020の14日目の記事です。昨日の記事はJP3BGYさんのPXE BootとIntel DCIを用いたLinux Debug環境でした。 はじめに カリー=ハワード同型対応ってかっこいいけど、何のことだかよくわからない。わたくし昆布の現時点での(偏った)理解を、疑似コードを交えて説明していきます。ほぼ備忘録です。 概要 直観主義論理(自然演繹)の命題とTypeScriptの型との間のカリー=ハワード同型対応を考えます。 前提 Wikipediaでは次のように書いてあります。 カリー=ハワード同型対応(カリー=ハワードどうけいたいおう、英語: Curry-Howard correspondence)とは、プログラミング言語理論と証明論において、計算機プログラムと証明との間の直接的な対応関係のことである。
はじめに Zod というバリデーションライブラリが非常に流行っているようなので、素振りした。 www.totaltypescript.com このチュートリアルはたしか Twitter で流れてきて知ったのだが 今見ると Zod の公式ドキュメントからも Resources として紹介されているので、そこそこ信頼していいコンテンツなのだと判断した。 チュートリアルについて チュートリアルと名がついているが、内容は全 10 問のエクササイズを解くという構成。 あらかじめ型チェックのエラーまたはランタイムのエラーが発生するサンプルコードが問題として用意されており、そのコードを修正しながら Zod の基本的な使い方を学ぶ。 チュートリアルには Zod の使い方の説明は特にないので、チュートリアルの問題を解くために Zod の公式ドキュメントを読んで必要な箇所を理解する、という感じ。 Rust で
Make ship happenTurborepo is the build system for JavaScript and TypeScript codebases
はじめに Reactの開発環境は、CRA(Create React APP)がよく使われますが、CRAは沢山のモジュールの整合性の確認などのため、アップデートがリリースされるまでの間隔が結構あります。 また、使われているモジュールをアップデートするとエラーに悩まされたりします。 ゼロからReactの開発環境を作成していたのですが、いろいろとトライを繰り返すうちに以下の方法に落ち着きました。 比較的短時間で環境が作成できますし、全て最新のモジュールが使えます。 Vite nodejsを用いたJavaSriptプロジェクトは、、Webpackなどでプロジェクト内のJavaScriptモジュールをひとつのファイルにまとめるバンドルと呼ばれる作業が必要でした。 これは、ブラウザがESモジュールに対応していないことや、ひとつのHTMLファイルから沢山のjsファイルをダウンロードさせると、その数だけア
はじめに 今回の記事では、私の独断と偏見でこれから学ぶべきTypeScriptフレームワークを4つ徹底解説する。今回の記事を参考に、TypeScriptを深く学ぶことにつながれば幸いである。TypeScriptが使われているフレームワークは数多く存在するので、何から手を付ければいいのかわからない人も少なくないだろう。もしこの記事を読んでいるプログラマーがTypeScriptのフレームワークを選んでいるのに悩んでいたら、今回の記事は参考になるはずだ。 あくまで個人の一見解に過ぎないが、参考になれば幸いである。 これから学ぶべきTypeScriptフレームワーク Next.js Nuxt3 NestJS SolidJS それぞれ順番に解説する。 1.Next.js Next.jsはReactベースで開発されたTypeScriptフレームワークである。最大の特徴は、URLルーティングと呼ばれるリ
問題 jest + typescript で、eslintが以下のエラーを出力した。 'describe' is not defined. eslint(no-undef) typescriptだと @types/jest を入れろと言われるが、eslint ではそれだけではダメだった。 解決策 eslint-plugin-jest を入れる必要があった。 www.npmjs.com READMEにある通り、以下のようにeslintrc.jsに追記する。 module.exports = { env: { ... "jest/globals": true, }, ... plugins: [ ... "jest", ], ... 結果 'describe' is not defined. は言われなくなった。 参考 eslintrc.js を載せておく。 module.exports =
概要 TypeScriptでフロントエンド開発をしているとバックエンドのAPIを呼び出す際に、APIのパラメータ、レスポンスの型付けをしたくなります。 僕は最近この型付けにZodを使い、APIクライアントにはZodiosというライブラリを使っています。 github.com この記事では、Zodios でZodのスキーマ定義から型安全なAPIクライアントを作る方法を紹介します。 他のやり方 Types定義 純粋にパラメータとレスポンスの type を Type Alias で定義し、fetch やaxios などの素のAPIクライアントに型付けするやり方です。 APIのパスと、パラメータ、レスポンスの紐付けを人間が管理することになるため、ミスを防ぐことができません。 aspida この課題のためにaspidaがよく使われている印象があります。 github.com Open APIからas
TypeScript 4.8 がリリースされました. これでやることといえば? そう, 数値リテラル型の符号を入れ替えることですね. type Negate<N extends number> = N extends 0 ? 0 : `${N}` extends `-${infer X extends number}` ? X : `-${N}` extends `${infer X extends number}` ? X : number; 動作確認. type Assert<T extends true> = T; type Compat<A, B> = [A] extends [B] ? [B] extends [A] ? true : false : false; type A1 = Assert<Compat<Negate<0>, 0>>; type A2 = Assert<C
みなさんこんにちは。今日は、TypeScriptの新しいコンパイラオプション(おそらく4.7で導入)であるmoduleSuffixesについての話題がTwitterで見られました。 moduleSuffixesについて詳しくはこちらをご参照ください。 これについては、「モジュール解決がさらに複雑化する」などいくつかの方向性から否定的な意見が見られました。しかし、筆者が考えてみたところ、正当性のある機能追加だと納得できたので考えをご紹介します。 3行でまとめると これまで通りランタイムの挙動に影響しないから大丈夫だよ pathsが怖くないならmoduleSuffixesも怖くないよ TypeScriptはJavaScript環境に追随するよ moduleSuffixesとは では、moduleSuffixesはどんなコンパイラオプションなのかという解説をまず少しします。これはTypeScri
Re: 僕らを縛る Node.js という呪いについて - あるいはなぜ TypeScript 以外が真っ当な選択肢にならなかったか https://d.potato4d.me/entry/20220405-nodejs/ へのアンサーソング。 プログラミング言語としての JavaScript の話をする。 2010年頃、Python 2 でプログラミングを学習した自分にとっては Node.js + CoffeeScript が Better Python だった。 CoffeeScript は当時の JS(ES3~5) に足りない機能を補ってくれて、Python と同じく空白制御のオフサイドルールなのが気に入った。見た目が少しだけ Ruby っぽいので当時全盛だった Rails の人間に訴求するにも有利だった。 Node.js のモジュールシステムである Commonjs は Pytho
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く