TypeScript のアロー関数でジェネリクスを使いこなす方法

2023.08.05 に更新記事は 4 分で読めます
サムネイル画像

この記事では TypeScript のアロー関数でジェネリクスを使う方法について分かりやすく解説します。

アロー関数を使ってジェネリクスを実装することでコードが短くなり、可読性が向上します。

結論: アロー関数でのジェネリクスの使用方法

最初に結論から説明します!

アロー関数でジェネリクスを使う方法はとても簡単です。
まずは、アロー関数でジェネリクスを使用した具体例を見てみましょう。

const identity = <T>(arg: T): T => arg;

この identity 関数は引数として受け取った値をそのまま返すだけの関数ですが、アロー関数とジェネリクスを使っているため どんな型でも対応可能 です。

ジェネリクスのおさらい

それでは、ジェネリクスについておさらいしておきましょう。

ジェネリクスとは 型引数を使ってコードの柔軟性を高める ための TypeScript の機能です。

ジェネリクスを使うことで 関数やクラス、インターフェイスなどで型をパラメータ化 し、より一般的なコードを書くことができます。

アロー関数でのジェネリクスの解説

先ほどの identity 関数はアロー関数を使って定義されており <T> でジェネリクスの型引数 T を宣言しています。
そして、引数 arg の型と戻り値の型に T を使っています。

これにより、どんな型でも処理できる柔軟な関数が実装となっています。

アロー関数のジェネリクスは関数宣言やクラスメソッドでも同様に使うことができます。
例えば、次のような Array のジェネリクスを使用した関数もアロー関数で書くことができます。

const getFirstElement = <T>(array: T[]): T => array[0];

この getFirstElement 関数は配列の最初の要素を返すだけの関数ですが、アロー関数とジェネリクスを使っているためどんな型の配列でも対応可能です

さらに、複数の型引数を使ったアロー関数も簡単に実装できます。

次の例は2つの引数を受け取り、それらをタプルとして返す pair 関数です。

const pair = <T, U>(first: T, second: U): [T, U] => [first, second];

この pair 関数はジェネリクスの型引数 TU を宣言し、それぞれの引数と戻り値の型に使用しています。

このようにアロー関数で複数の型引数を使う場合も簡潔で可読性の高いコードが書けます。

まとめ

今回の記事では TypeScript のアロー関数でジェネリクスを使う方法について解説しました!

アロー関数を使ってジェネリクスを実装することでコードが短くなり、可読性が向上します。

これらの例を参考に、アロー関数とジェネリクスを組み合わせて柔軟で短くて可読性の高い TypeScript のコードを書いてみてください!

プロフィールアイコン

Syuu

フロントエンドが好きなWEBエンジニア Next.js / React / TypeScript

SHARE