26. ジェネリックな型定義

関数だけでなく、type や interface にも型引数を持たせられます。type Box<T> = { value: T } と定義すれば、Box<number> や Box<string> のように、中身の型だけ違う型を1つの定義から作れます。

実務で頻出するのは API レスポンスの「共通の入れ物」です。どのレスポンスも ok と data を持つが data の中身だけ違う、という構造を ApiResponse<T> のように1回定義すれば、エンドポイントごとに型を書き直す必要がなくなります。

実は今まで使ってきた number[](Array<number>)もジェネリックな型です。「外側の構造は同じで、中身の型が変わる」ものを見つけたら、ジェネリックな型定義の出番です。

▶ サンプルコードを実行してみよう(自由に書き換えてOK)

TypeScript

// 型定義に型引数 T を持たせる
type Box<T> = {
  value: T;
};

const numberBox: Box<number> = { value: 100 };
const stringBox: Box<string> = { value: "hello" };

console.log(numberBox.value);
console.log(stringBox.value.toUpperCase());

// 実務でよくある形: API レスポンスの共通の入れ物
type ApiResponse<T> = { ok: boolean; data: T };
const userListResponse: ApiResponse<string[]> = { ok: true, data: ["Taro", "Hanako"] };
console.log(userListResponse.data);

公式ドキュメントで詳しく ↗