TypeScriptジェネリクスをサクッと理解【その2 functionに対して使うジェネリクス】
2024.3.16
この記事は約3分で読めます

この記事の筆者:三好アキ
🟢 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。
🟢『はじめてつくるReactアプリ with TypeScript』、『動かして学ぶ!Next.js/React開発入門(翔泳社/*韓国でも出版)』著者。
▼ Amazon著者ページはこちら
amazon.co.jp/stores/author/B099Z51QF2
最初にお知らせです。
【他に類のないTypeScript + React教材】をリリースしました。
▼ 購入はこちらから
👉 monotein.base.shop/p/00006(Baseショップ)
👉 monotein.booth.pm/items/5611944(Boothショップ)
TypeScriptのジェネリクスはむずかしい?
この記事はジェネリクスをサクッと解説する全4回の記事の2つ目です。
1 → TypeScriptジェネリクスをサクッと理解【その1 型定義に対して使うジェネリクス】
*2(本記事)→ TypeScriptジェネリクスをサクッと理解【その2 functionに対して使うジェネリクス】
3 → TypeScriptジェネリクスをサクッと理解【その3 型定義とfunction両方に対して使うジェネリクス】
4 → TypeScriptジェネリクスをサクッと理解【その4 複数のジェネリクスをつかう】
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
}
...
これでジェネリクス化は完了し、example
functionの型は、実際にexample
を利用する時に注入するようになりました。しかし型の推測によって、この時点でエラーは消えます。
次のように、実際の型情報を注入する必要があるケースも存在するので、覚えておきましょう。
// main.ts
function example<T>(a: T): T{
return a
}
console.log(
example<string>("東京") // 追加
)
console.log(
example<number>(2005) // 追加
)
これがfunctionに対するジェネリクスです。次回は、「型定義とfunctionの両方に対してジェネリクス」を使う例を見ましょう。
【他に類のないTypeScript + React教材】をリリースしました。
▼ 購入はこちらから
👉 monotein.base.shop/p/00006(Baseショップ)
👉 monotein.booth.pm/items/5611944(Boothショップ)
▼【無料フロントエンド・ガイド】は下記ページで受け取れます。

🟩 フロントエンド開発者入門ガイド【無料配布中】
最初にこれが知りたかった!
フロントエンド初心者が必ず押さえておきたい ― 『挫折しない勉強法』とその具体的ステップ、無料配布中。
(*名前不要・メールアドレスだけで受け取り可能です)