見出し画像

TypeScript 入門の記録（５４）プロを目指す人のためのTypeScript入門（３８）ジェネリクス

jnkykn

前回は、「関数型の部分型関係」について学習しました。今日は「プロを目指す人のためのTypeScript入門」第4章「関数」の続き、「ジェネリクス」について学習します。

ジェネリクス

ジェネリクスは、型引数を受け取る関数を作る機能です。ジェネリクスはC#にもあるので馴染みがありますが、TypeScript ならではの部分に注目しながら学習します。

関数の型引数

関数呼び出しは、関数<型引数群>(実引数群) という形をとります。Tに与えた型に合った実引数を渡すので、同じ関数に、Tにstringを指定した場合は引数にstring型の値を設定し、Tにnumberを指定した場合は、引数にnumber型の値を設定して実行することができます。便利。型引数を持つ関数は「どんな型に対しても適用可能なアルゴリズムの関数」に適しています。これは、うまく活用したいです。

// 関数の型引数 function repeat<T>(element: T, length: number): T[] { const result: T[] = []; for (let i = 0; i < length; i++){ result.push(element); } return result; } // ["a","a","a","a","a"] が表示される console.log(repeat<string>("a", 5)); // [123,123,123]が表示される console.log(repeat<number>(123,3));
Tに与えた型を実引数に設定する

関数の型引数宣言

アロー関数式、メソッド記法の場合も、型引数リストのあとに実引数リストを書きます。型引数リストが複数の場合や、extends、オプショナル型引数も使用できます。

// extendsやオプショナル型引数も使用できる const repeatEx = <T extends {name: string;}>(element: T, length: number): T[] => { const result: T[] = []; for ( let i = 0; i < length; i++ ){ result.push(element); } return result; } type HasNameAndAge = { name: string; age: number; } console.log(repeatEx<HasNameAndAge>({ name: "uhyo", age: 26, }, 3));
型引数にはextendsも使える

関数の型引数は省略可能

型引数を持つ関数を呼び出すほとんどの場合は、型引数指定を省略できます。呼び出し側で型引数指定を省略しても、型推論で補われるというのは、直感的で違和感ありません。

// 関数の型引数 function repeat<T>(element: T, length: number): T[] { const result: T[] = []; for (let i = 0; i < length; i++){ result.push(element); } return result; } // ["a","a","a","a","a"] が表示される console.log(repeat<string>("a", 5)); // [123,123,123]が表示される console.log(repeat<number>(123,3)); // 呼び出し側は型引数を省略できる console.log(repeat("b",5));
呼び出し側は型引数を省略できる

型引数をもつ関数型

関数型には、型引数の情報も含まれます。

// 型引数を持つ関数型 type Func = <T>(arg: T, num: number) => T[]; const repeatFunc: Func = (element, length) => { const result = []; for ( let i = 0; i < length; i++ ){ result.push(element); } return result; };
型引数Tを持ち、T型の引数とnumber型の引数を受け取りT型の配列を返却する関数型の関数として宣言することができる

まとめ

今日は、ジェネリクスについて学習しました。まだ関数型の記法に慣れていませんが、TypeScript の型推論に助けられる部分についてはイメージできるようになってきました。部分型関係も雰囲気はつかめたものの、すっきり理解できたというところまでたどりつけていません。引き続き学習していくなかで、理解を深めていきたいです。さて、今日の学習はここまでにします。この続きは、次の週末の予定です。


この記事が気に入ったらサポートをしてみませんか？