🔤

TypeScriptジェネリクスパターン — Tが何か一発で理解する

関数/クラス/インターフェースで「後で決まる型」を使う方法

Tは「呼び出し時に決まる」。first([1,2,3]) → TypeScriptがT=numberと推論。

制約: <T extends HasId> — TがHasIdを満たす必要
keyof: <K extends keyof T> — KはTのキーの1つ
ユーティリティ型: Partial、Required、Pick、Omit — 全てジェネリクスで実装

type Partial<T> = { [K in keyof T]?: T[K] };

この1行が読めればTypeScriptジェネリクスを理解した証拠。

キーポイント

Tは「まだ分からない型」のプレースホルダー — 呼び出し時に決定

T extends Constraintで制約追加 — Tが満たすべき条件

keyof Tでオブジェクトのキーを型として抽出

Partial<T>、Pick<T,K>等のユーティリティ型はジェネリクス+mapped typeで実装

APIクライアント — fetch<T>(url): Promise<T>でレスポンス型自動推論コンポーネントprops — Reactでgenericコンポーネント作成