【TypeScript】ジェネリクスとは何か？実例で解説<T>やU,K,V,Eの意味・どれを使うべきか？

TypeScriptのコードを読んでいると頻出する <T> や Array<string>。なんとなく「ジェネリクス」であることは知っているけど、そもそもジェネリクスって何？

そして、ジェネリクスで使われている「T、U、K、V、E 」はどれを使えばいいの？といった疑問を抱いたことはないでしょうか？

複雑そうに見えるジェネリクスも、その「役割」と「慣習」さえ理解すれば、再利用性と安全性の高いコードを書くための強力な武器になります。

この記事では、ジェネリクスの基本構文から、T、U、Kといった慣習的な型変数の意味と最適な使い方を実例を交えて解説しています。

曖昧だったジェネリクスへの理解を整理し、今日からあなたのコードの質を確実に向上させましょう。

TSのジェネリクスとは何か？

TypeScriptのジェネリクス（Generics）は、「型を引数として受け取る」仕組みです。

簡単に言えば、「型を後から指定できるようにする」ことで、様々な型に対応できる再利用性の高いコードを書くための機能です。

ジェネリクスの使い方

ジェネリクスの基本形は、型を定義したい名前の直後に、山括弧（<>）で囲まれた型変数を指定することです。

例えば、以下のように記述した場合、この関数は引数として受け取った型をそのまま戻り値の型として返します。

function functionName<T>(arg: T): T {
    return `入力値は「${arg}」です。`;
}

ジェネリクスをセットした関数を呼び出すときに、<>の中に型を指定して渡します。

let result = functionName<string>("Hello"); //string型を渡す

型推論に任せる場合

ジェネリクスを定義した関数を呼び出すときに、型を指定せずTSの型推論機能に任せることもできます。

function functionName<T>(arg: T): T {
    return `入力値は「${arg}」です。`;
}

先ほどの上記関数に対して、<T>の部分を指定せずに以下のように記述すれば、引数から推論された型が渡されます。

let output1 = functionName(123); // Tはnumberと推論される

let output2 = functionName([1, 2, 3]); // Tはnumber[]と推論される

複数の異なる型を関連付ける

ジェネリクスは、Tだけでなく、U、Vなど複数の型変数を使うことで、型同士の関係を定義できます。

2つ以上の異なる型の引数を受け取る場合などに使用します。

以下の例のようにカンマで区切って記述します。

function pair<T, U>(first: T, second: U): [T, U] {
  return [first, second];
}

上記関数の呼び出しは以下のようになります。

const result = pair("name", 25); // result型： [string, number]

インターフェースで使用する

インターフェースを定義する際に、その内部で扱う要素の型を後から指定するために使用します。

interface名の後ろにジェネリクスを記述します。

interface MyMap<K, V> {
  set(key: K, value: V): void;
  get(key: K): V | undefined;
}

上記関数の呼び出しは以下のようになります。

const userCache: MyMap<string, User> = new Map();

ジェネリクスで使用するT, U, K, V, E

ジェネリクスでよく使用するT, U, K, V, Eは慣習的に利用するもので、必ずしもこれを使わなければいけないというわけではありません。

ただし、T, U, K, V, Eにはそれぞれ意味があります。