TypeScriptのgenericsを理解する

未分類

最近関わっている案件で、typescriptを使用しているものの改修作業があり、まずは、型定義として一般的なgenericsについて調査したものを備忘録として残します。

genericsとは

typescriptで型を簡略化して記載することができるもの。例えば以下のような関数があったとする。

function hoge(arg: string): string {
  return arg;
}

hoge("aaa"); // => aaa

ここで上記のコードについて解説(上記のコードが何をしているかわかる人は飛ばしてください)

ここで、hoge(arg: string)は、関数hogeに引数argを渡しています。また、arg: stringとありますが、これはstring型しか受け取れないことを意味しており、このように引数の型を指定することができ、想定していない引数が入らないようにしています。

また、関数定義の最後の: stringの部分は関数の戻り値の型を示しており、argと同じく、string型以外の型が返り値として返らないようになっています。

上記が基礎となる書き方となります。但し、上記の書き方で複数の型を使用して使うことを想定すると、

function hoge(arg: string): string {
  return arg;
}

function hoge2(arg: number): number {
  return arg;
}

hoge("aaa"); // => aaa
hoge2(1); // => 1

ちょっと冗長になります。

そこで、genericsを使用することで簡単に書くことが可能になる。

function hoge<T>(arg: T): T {
  return arg;
}

hoge<number>(1); // => 1
hoge<string>("aaa"); // => aaa

このように一つの関数定義で複数の型を使用することができる。<>内に型を記載することで、引数、返り値に型を定義することができる。

hoge("aaa"); // => aaa

上記のように型推論が適用され、引数から型を推測することで<string>を省略することができます。(この場合、返り値もstringになります)

コメント

タイトルとURLをコピーしました