制約付きジェネリクス｜コードで実践

T は「何でもよい」ので、中で何もできない

型引数はどんな型でも受け取れます。裏を返すと、関数の中で使えるものが何もありません。

function collectIds<T>(items: T[]): number[] {
  return items.map((item) => item.id);
}
// エラー Property 'id' does not exist on type 'T'.

数値の配列を渡されるかもしれないのだから id があるとは限らない、という指摘です。もっともな話です。

extends で条件を付ける

型引数の後ろに extends と型を書くと、この形を満たす型だけ受け付ける、と宣言できます。これを制約と呼びます。

function collectIds<T extends { id: number }>(items: T[]): number[] {
  return items.map((item) => item.id);
}

これで item.id が読めるようになりました。id が number であることも保証されているので、そのまま number[] として返せます。

条件は下限であって、上限ではない

制約は満たすべき最低条件です。それ以外のプロパティが付いていてもかまいません。

const works = [
  { id: 1, title: "プロフィールサイト", published: true },
  { id: 2, title: "自己紹介カード", published: false },
];

collectIds(works); // [1, 2]

条件を満たさない配列は、その場で止まります。

collectIds([{ title: "スキル一覧の表" }]);
// エラー Property 'id' is missing in type ...

any との違い

items: any[] と書いても item.id は通ります。ただし通るだけで、id を持たない配列を渡しても止まりません。extends は、必要な条件だけを要求して、残りは自由なままにする書き方です。要求が具体的なぶん、Work でも Profile でも id さえあれば同じ関数が使えます。

手を動かす

演習では、id を持つオブジェクトの配列から id だけを取り出す関数を書きます。いまは制約が無いためエラーになっています。エラーメッセージを読んで、足りない条件を書き足してください。

制約付きジェネリクス

T は「何でもよい」ので、中で何もできない

extends で条件を付ける

条件は下限であって、上限ではない

any との違い

手を動かす

要件

入出力例

ヒント

メモ