24. ジェネリック関数

ジェネリクスは「型を後から決められる」仕組みです。関数名の後ろに <T> と型引数を書き、引数や戻り値の型に T を使います。呼び出すときの値に応じて、T が number や string に決まります。

実務では「どんな型でも動くが、入力と出力の型はそろえたい」処理に使います。配列の先頭を返す、値をそのまま包んで返す、といった汎用の関数を、any を使わず型安全に書けるのがジェネリクスの価値です。

つまずきポイントは T という名前に身構えてしまうことです。T はただの型の変数名で、「呼び出し時に決まる型の仮の名前」にすぎません。値の引数と同じ感覚で読みましょう。

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

TypeScript

// T は呼び出し時に決まる「型の引数」
function firstElement<T>(items: T[]): T {
  return items[0];
}

const firstScore = firstElement([10, 20, 30]); // T は number に決まる
const firstFruit = firstElement(["apple", "banana"]); // T は string に決まる

console.log(firstScore);
console.log(firstFruit);

// string と分かっているので文字列メソッドも安全に使える
console.log(firstFruit.toUpperCase());

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