typescriptのジェネリック(generic)

typescript generic

genericとは

ジェネリック(generic)はC#, Java等の言語で再利用性が高いコンポーネントを作る時に活用なるのが特徴です。
一つの型より複数の型で動作するコンポーネントを生成する時に使われます。
ジェネリック(generic)を使用するのはUnion Typeと同じ感じでパラメータやreturn値等一つの型ではない場合にtypescriptではanyを使うのが一般的ですが、
ジェネリック(generic)を使う時はUnion Typeと同じく再利用性に良いです。

文字や数字、Booleanの値を出力する関数はジェネリック(generic)をどうやって使うのか見てみましょう。

function unionTypeFunc(parameter: string | number) {
  function printText(x: any): any {
    return x;
  } 

  function printText<T>(x: T): T {
    return x;
  }

  printText('hello'); // 'hello'
  printText(30); // 30
  printText(false); // false
}

any型でした場合はtype checkerをしないので今後runtime errorになる問題が高いです。
しかし、ジェネリック(generic)を利用すればtype checkerだけではなくアーギュメントに合わせてreturn値も設定が可能です。
※ジェネリックのTTypeを意味します。二つのジェネリックを書く場合はTUを使うのが一般的です。

Generic Type

functionを利用してGenericのinterfaceを作るのが可能です。
#1と#2のような形で実装するのが可能です。
関数で定義した際はJavascriptの関数宣言と一緒で変数にした場合は関数式と同じです。

// 関数宣言
function printText<T>(text: T): T {
  return text;
}

// #1 関数式
let str: <T>(text: T) => T = printText;
// #2 関数式
let str: {<T>(text: T): T} = printText;

Generic Typeの参考サイト