TypeScript入門ジェネリック関数、ジェネリクスについて理解しよう

前のレッスンで、次のような与えられたパラメータからランダムで1文字を取り出す関数を作成しました。

function getRandomChar(...chars: string[]): string {
  const index: number = Math.floor(Math.random() * chars.length);
  return chars[index];
}

console.log(getRandomChar("1", "a", "A")); // Aなど

この場合、パラメータの型は文字列に限られているため、例えば次のように数字だけを使いたい場合でも数字として指定することはできません。

console.log(getRandomChar(1, 2, 3)); // エラー

といって、先に紹介した「オーバーロード」でもう1つ関数を定義するのは、少し無駄が多くなってしまいます。また、型を「any」にしてしまえば、一応は解決しますが、any型はあまり使うべきではないと紹介しました。

そこで、このようなケースの場合は型を後から決める「ジェネリクス」というしくみを利用すると便利です。

ジェネリクスを使おう

関数の定義を次のように書き換えてみましょう。

function getRandomChar<Type>(...chars: Type[]): Type {
  const index: number = Math.floor(Math.random() * chars.length);
  return chars[index];
}

型が「Type」という見慣れないものに変わっています。詳しいことはこの後解説するとして、まずは使ってみましょう。呼び出し方も少し変わります。

console.log(getRandomChar<string>("1", "a", "A")); // Aなど
console.log(getRandomChar<number>(1, 2, 3)); // 2など

こちらも、関数名の後に型名が来ています。つまり、この関数は呼び出す時に型を指定しているのです。もう一度、関数定義を見てみましょう。

function getRandomChar<Type>(...chars: Type[]): Type {

関数名の直後にある「<Type>」という記述は、特に「Type」に限られたものではなく、自由に名前をつけることができます。よく短縮して、大文字の「T」が使われることがあります。

function getRandomChar<T>...

これが、「型の定義」となり、呼び出す時に実際の型が決まります。そしたら、その型をパラメータや戻り値で利用できるようになります。

function getRandomChar<Type>(...chars: Type[]): Type {

つまりこの場合、「string」として呼び出した場合は、パラメータも戻り値もstringに、「number」として呼び出した場合は、パラメータも戻り値もnumberになります。

こうして、応用の効きやすい関数を作ることができます。