TypeScript 入門の記録（５４）プロを目指す人のためのTypeScript入門（３８）ジェネリクス
前回は、「関数型の部分型関係」について学習しました。今日は「プロを目指す人のための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));](https://assets.st-note.com/img/1684669000896-NwiLNHaxiC.png?width=1200)
関数の型引数宣言
アロー関数式、メソッド記法の場合も、型引数リストのあとに実引数リストを書きます。型引数リストが複数の場合や、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));](https://assets.st-note.com/img/1684670533937-9O1TbnG5CE.png?width=1200)
関数の型引数は省略可能
型引数を持つ関数を呼び出すほとんどの場合は、型引数指定を省略できます。呼び出し側で型引数指定を省略しても、型推論で補われるというのは、直感的で違和感ありません。
![// 関数の型引数 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));](https://assets.st-note.com/img/1684671389904-pDwXVVHi2E.png?width=1200)
型引数をもつ関数型
関数型には、型引数の情報も含まれます。
![// 型引数を持つ関数型 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; };](https://assets.st-note.com/img/1684671758887-FhcNI4IyNo.png?width=1200)
まとめ
今日は、ジェネリクスについて学習しました。まだ関数型の記法に慣れていませんが、TypeScript の型推論に助けられる部分についてはイメージできるようになってきました。部分型関係も雰囲気はつかめたものの、すっきり理解できたというところまでたどりつけていません。引き続き学習していくなかで、理解を深めていきたいです。さて、今日の学習はここまでにします。この続きは、次の週末の予定です。