TypeScriptジェネリクスをサクッと理解【その２ functionに対して使うジェネリクス】
2024.3.16
この記事は約3分で読めます
筆者：三好アキ（専門用語なしでプログラミング）
▶︎ 三好アキの著書一覧はこちら
TypeScriptのジェネリクスはむずかしい？
この記事はジェネリクスをサクッと解説する全4回の記事の2つ目です。
1 → TypeScriptジェネリクスをサクッと理解【その１ 型定義に対して使うジェネリクス】
*2（本記事）→ TypeScriptジェネリクスをサクッと理解【その２ functionに対して使うジェネリクス】
3 → TypeScriptジェネリクスをサクッと理解【その３ 型定義とfunction両方に対して使うジェネリクス】
4 → TypeScriptジェネリクスをサクッと理解【その４ 複数のジェネリクスをつかう】
functionのジェネリクス
次のコードがあったとします
// main.ts
function example(a: string){
return a
}これはaで渡されたstringのデータをreturnするだけのfunctionです。
次のコードを追加して、JavaScriptに変換すると、ブラウザのコンソールには「東京」と表示されます。
// main.ts
function example(a: string){
return a
}
// ⬇追加
console.log(
example("東京")
)
// ⬆追加さて、functionにはデータが2つ登場します。
「渡すデータ」と「操作後のデータ（＝returnするデータ）」です。
function 名前(渡すデータ){
実行したい操作
return 操作後のデータ
}「returnするデータ」の型は「渡すデータ」の型によってTypeScriptが推測してくれるので、実際は書く必要のないケースがほとんどですが、次のように明示も可能です。
// main.ts
function example(a: string): string{ // 追加
return a
}
...つまりfunctionに書く型の記法は次のようになっています。
function 名前(渡すデータ: 渡すデータの型): returnするデータの型{
実行したい操作
return 操作後のデータ
}main.tsに次のコードを追加したとします。
// main.ts
function example(a: string): string{
return a
}
console.log(
example("東京")
)
// ⬇追加
console.log(
example(2005)
)
// ⬆追加エラーが出ます。渡すデータの型がstringと指定されているからです。
ここで使うのがジェネリクスです。まずaの横のstringをTに変えます。
// main.ts
function example(a: T){ // 変更
return a
}
...渡すデータの型がTという実質的な中身のないものになり、TypeScriptの推測が働かなくなったので、returnするデータの型を明示してあげる必要があります。
// main.ts
function example(a: T): T{ // 変更
return a
}
...これで済めばコードの見た目は比較的シンプルですが、「ジェネリクスを使っています」ということを明示する必要があるので、次のコードも必要です。
// main.ts
function example<T>(a: T): T{ // 追加
return a
}
...これでジェネリクス化は完了し、examplefunctionの型は、実際にexampleを利用する時に注入するようになりました。しかし型の推測によって、この時点でエラーは消えます。
次のように、実際の型情報を注入する必要があるケースも存在するので、覚えておきましょう。
// main.ts
function example<T>(a: T): T{
return a
}
console.log(
example<string>("東京") // 追加
)
console.log(
example<number>(2005) // 追加
)これがfunctionに対するジェネリクスです。次回は、「型定義とfunctionの両方に対してジェネリクス」を使う例を見ましょう。
✤ 筆者 ✤
三好アキ（専門用語なしでプログラミング）
「専門用語なし」のメソッドで1,200人以上のビギナーをフロントエンド開発入門に成功させる。翔泳社『動かして学ぶ！Next.js/React開発入門』（韓国でも出版）など著書25冊以上。Amazonベストセラー1位複数回獲得。
React、Next.js、TypeScriptなどの最新情報や初心者向けコンテンツを、無料メルマガ配信中。メールアドレスだけで登録可 ▶︎ 無料メルマガ登録