[TypeScript]ジェネリクスについて簡単にまとめた

ジェネリクスとは

ジェネリクスとは、型引数を受け取る関数を作る機能のことです。
ジェネリクスはTypeScriptプログラミングにおいて欠かすことができない機能の一つです。
例えば、以下のように書くことができます。

type User<N> = {
    age: N;
};
  
const userAge: User<string> = { age: "25" };
const userAge2: User<number> = { age: 25 };
console.log(userAge);
console.log(userAge2);

このように、引数の中身(N)を「age」の型定義に適用させることができます。
これが、以下のようにするとコンパイルエラーとなります。

type User<N> = {
    age: N;
};

// コンパイルエラー↓
const userAge: User<number> = { age: "25" };
// コンパイルエラー↓
const userAge2: User<string> = { age: 25 };
console.log(userAge);
console.log(userAge2);

関数の型引数とは

以下のコードを参考に説明します。

function repeat<T>(element: T, length: number): T[]{
    const result: T[] = [];
    for(let i = 0; i < length; i++){
        result.push(element)
    }
    return result
}

// ["a", "a", "a", "a", "a"]が表示される。
console.log(repeat<string>('a', 5));
// [123, 123, 123]が表示される。
console.log(repeat<number>(123, 3));

解説

1. ジェネリクスの宣言

function repeat<T>(element: T, length: number): T[]{
    // ...
}

Tは型パラメータを宣言しており、この関数が受け取る引数や戻り値の型が任意の型に対応できるようにしています。この場合、T は配列の要素の型を表しています。

2. 型パラメータの利用

const result: T[] = [];

T で宣言された型パラメータを使用して、空の配列 result を宣言しています。これにより、result 配列はジェネリクス型に基づいて型付けされます。

3. 型の決定

console.log(repeat<string>('a', 5));
console.log(repeat<number>(123, 3));

関数を呼び出す際に、ジェネリクスの型パラメータに具体的な型を指定しています。最初の例では文字列型 (string) を指定し、2番目の例では数値型 (number) を指定しています。これにより、element パラメータと関連する型が string または number に決定されます。

以下のようにするとエラーになります。

// 型 'number' の引数を型 'string' のパラメーターに割り当てることはできません。
console.log(repeat<string>(100, 5));