中級

ジェネリクスを読む

なぜ学ぶか： useState<string>やPromise<User> — AIのコードには<>付きの型がたくさん出ます。自分で書けなくてOK、まず「読める」ことが目標です。下の例を見てください。

まずはこの例を見てみましょう

// <> は「〜用の」という型の指定。まずは読み方から

const [name, setName] = useState<string>(""); // 「string 用の state」

// 自作もできる: T は「使うときに決まる」型の仮の名前
function first<T>(arr: T[]) {
  return arr[0];
}

first([10, 20, 30]); // 数値の配列を渡した → T は number に決まる
first(["a", "b"]);   // 文字列の配列を渡した → T は string に決まる

「<>の中＝何を扱うか」。ここだけ読めれば、複雑な型も怖くありません。

<>＝「〜用の」という指定

例のuseState<string>は「string用のuseState」。Promise<User>なら「あとでUserが届く」。「〜用の」と読み替えればOKです。

T＝あとで決まる型の仮の名前

例のfirstは、数値にも文字列にも使えます。渡した配列に合わせてTが決まる — 1つの関数を安全に使い回す仕組みです。

anyとの違いは「型が残る」こと

何でも入るのは同じでも、ジェネリクスは入れた型を覚えているので、チェックが効き続けます。anyは型を捨ててしまいます。

ステップ 1 / 3

← カリキュラム一覧へ戻る

※ カリキュラムの内容はAIが生成しており、誤りが含まれる場合があります。正確な情報は公式ドキュメント等でご確認ください。