TypeScript ジェネリクス関数解説
2024-09-20
TypeScript のジェネリクス付きアロー関数の構文について
TypeScriptにおけるジェネリクス付きアロー関数の構文は、次のようになります。
(arguments: GenericType<T>) => ReturnType<T>
ここで、
ReturnType<T>: 関数の戻り値の型です。こちらもジェネリック型で、Tに対応する型になります。GenericType<T>: ジェネリック型です。Tは型変数であり、具体的な型を後で指定します。
例
// 任意の型の配列を受け取り、その配列の要素をすべて大文字にする関数を定義
const capitalizeArray = <T extends string>(array: T[]): T[] => {
return array.map(item => item.toUpperCase());
};
// 使用例
const stringArray = ['hello', 'world'];
const capitalizedArray = capitalizeArray(stringArray);
console.log(capitalizedArray); // ['HELLO', 'WORLD']
重要なポイント
extendsキーワードを使用して、型変数の制約を指定することもできます（例ではT extends string）。- 型変数
Tは、関数の引数や戻り値の型に指定されます。 - ジェネリック型は
<T>のように角括弧で囲んで定義します。
さらに詳しく
- 型安全性を確保し、バグを減らすことができます。
- 複数の型に適用できる関数を定義することができます。
- ジェネリック型は、再利用可能なコードを書く際に非常に便利です。
TypeScript ジェネリクス関数解説
ジェネリクス付きアロー関数の例
// 任意の型の配列を受け取り、その配列の要素をすべて大文字にする関数を定義
const capitalizeArray = <T extends string>(array: T[]): T[] => {
return array.map(item => item.toUpperCase());
};
// 使用例
const stringArray = ['hello', 'world'];
const capitalizedArray = capitalizeArray(stringArray);
console.log(capitalizedArray); // ['HELLO', 'WORLD']
コード解説
ジェネリック型 T の定義
関数の引数
関数の戻り値
関数の処理
ジェネリクス関数の利点
- 可読性
コードがより明確になり、理解しやすくなります。 - 型安全
型チェックにより、バグを減らすことができます。 - 再利用性
さまざまな型に適用できる関数を定義できます。
他の例
// 任意の型の要素を比較する関数を定義
const compareItems = <T>(a: T, b: T): number => {
// 実際の比較ロジックを実装
// ...
};
// 任意の型の配列をソートする関数を定義
const sortArray = <T>(array: T[], compareFn: (a: T, b: T) => number): T[] => {
return array.sort(compareFn);
};
インターフェースの使用
インターフェースを使用して、関数の引数や戻り値の型を定義し、ジェネリクスを回避することができます。
interface ArrayCapitalizer<T extends string> {
(array: T[]): T[];
}
const capitalizeArray: ArrayCapitalizer<string> = (array) => {
return array.map(item => item.toUpperCase());
};
オーバーロード
関数のオーバーロードを使用して、異なる引数型に対応することができます。
function capitalizeArray(array: string[]): string[];
function capitalizeArray<T>(array: T[]): T[];
function capitalizeArray<T>(array: T[]): T[] {
return array.map(item => item.toUpperCase());
}
型アサーション
型アサーションを使用して、特定の型であることを明示的に指定することができます。
const capitalizeArray = (array: any[]): any[] => {
return array.map(item => item.toUpperCase() as string);
};
型推論
TypeScript の型推論機能を利用して、ジェネリクスを省略することができます。
const capitalizeArray = (array: string[]) => {
return array.map(item => item.toUpperCase());
};
ユーティリティ型
TypeScript には、さまざまなユーティリティ型が提供されており、ジェネリクスを簡潔に表現することができます。
import { Map } from 'typescript';
const capitalizeArray = <T extends string>(array: T[]): Map<T, string> => {
return array.map(item => item.toUpperCase());
};
選択基準
これらの代替方法の選択は、プロジェクトの要件や個人の好みによって異なります。以下は、考慮すべき要素です。
- 柔軟性
ジェネリクスは、より柔軟な関数を定義することができます。 - 簡潔さ
型推論やユーティリティ型は、コードを簡潔にすることができます。 - 型安全
ジェネリクスは、型安全性を確保するのに役立ちます。 - 可読性
インターフェースやオーバーロードは、コードの意図を明確にすることができます。
typescript
