前セクションでも登場したジェネリクスは、「とりあえずの仮置きとして置かれた、実質的な中身のない型情報」のことです。「型はあとで決める」という柔軟さと、複数のオブジェクトやfunctionに対して使い回すことのできる汎用性を得ることができます。しかしこのような説明だけでは理解しにくいので、コードで確認しましょう。

本セクションではわかりやすいように、ジェネリクスを「型定義に対して使うもの」と「functionに対して使うもの」に分け、最後に両方を合わせたケースを紹介します。

型定義のジェネリクス

次のコードを書いてください。

// main.ts

const userOne: any = {
    data: "太郎",
    color: "赤"
}

anyの代わりに、しっかりした型定義を用意しましょう。

// main.ts

// ⬇追加
type User = {
    data: string;
    color: string;
}
// ⬆追加

const userOne: User = {    // 修正
    data: "太郎",
    color: "赤"
}

しかしもしここで、次のような2つ目のデータがあると、この型定義ではエラーが出ます。userTwoのdataの型がnumberだからです。

// main.ts

type User = {
    data: string;
    color: string;
}

const userOne: User = {
    data: "太郎",
    color: "赤"
}

// ⬇追加
const userTwo: User = {
    data: 2002,
    color: "緑"
}
// ⬆追加

なので、型定義Userをもっと抽象化して、より広く使えるようにしましょう。次の変更を加えてください。

// main.ts

type User<T> = {           // 変更
    data: T;               // 変更
    color: string;
}

const userOne: User = {
    ...

<T>は仮置きの型、実質的な中身のない型に過ぎません。これを意味あるものにするには、実際の型を注入する必要があります。次のコードを追加しましょう。

// main.ts

type User<T> = {
    data: T;
    color: string;
}

const userOne: User<string> = {       // 追加
    data: "太郎",
    color: "赤"
}

const userTwo: User<number> = {         // 追加
    data: 2002,
    color: "赤"
}

これが型定義対して使うジェネリクスです（型引数／Type parametersとも呼ばれます）。一般的には<T>や<K>、<U>などが使われますが、<ArgType>や<Name>など任意の文字でも機能します。次はfunctionに対するジェネリクスです。