ジェネリクス(<T>)

このレッスンでは、いろいろな型に対応できる関数や型を作れるジェネリクス(<T>)の使い方を学びます。「TypeScript ジェネリクス使い方」で調べている方向けです。

ジェネリクスは「型を後から決められる型変数」のようなものです。<T>という記号で仮の型を宣言しておき、実際に使うときに具体的な型(numberやstringなど)を当てはめます。

サンプルコードでは、function firstItem<T>(arr: T[]): Tという関数を定義しています。この関数は数値の配列にも文字列の配列にも使え、それぞれ正しい型の値を返してくれます。

初心者がよくつまずくのが、「なぜany型ではダメなのか」という疑問です。anyを使うと型チェックが効かなくなりますが、ジェネリクスなら「渡した配列の型と同じ型が返ってくる」という関係性を保ったまま、型の安全性を維持できます。

実際の開発現場では、配列操作のユーティリティ関数や、API通信の共通処理など、「型は違っても処理の流れは同じ」というコードでジェネリクスが多用されます。

📖 お手本コード

function firstItem<T>(arr: T[]): T {
  return arr[0];
}

const firstNum = firstItem<number>([10, 20, 30]);
const firstStr = firstItem<string>(["りんご", "みかん"]);
console.log(firstNum, firstStr);

✍️ あなたのコード

コードを書いたら「実行する」を押してください

🧪 このサイトではTypeScriptを直接コンパイル・実行できないため、お手本コードと同じ内容を入力できたかをその場で判定します(採点はブラウザ内だけで行われ、どこにも送信されません)。

🎯

ここまでできればゴール達成!
型が違う配列にも対応できる、汎用的な関数が作れるようになります。