TypeScriptジェネリクスをサクッと理解【その２　functionに対して使うジェネリクス】

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
}
...

これでジェネリクス化は完了し、exampleというfunctionの型は、実際にexampleを利用する時に注入するようになりました。しかし型の推測によって、この時点でエラーは消えます。

次のように、実際の型情報を注入する必要があるケースも存在するので、覚えておきましょう。

// main.ts

function example<T>(a: T): T{
    return a
}

console.log(
    example<string>("東京")      // 追加
)

console.log(
    example<number>(2005)      // 追加
)

これがfunctionに対するジェネリクスです。次回は、「型定義とfunctionの両方に対してジェネリクス」を使う例を見ましょう。

---

2024年3月にReact + TypeScriptの新刊書をリリースしました。

ジェネリクスを含む、基礎から応用までの幅広い範囲をカバーしており、TypeScript + React入門者から、中級者の人にもっとも学びがある内容になっています。

https://monotein.base.shop/p/00002

三好アキ『React + TS徹底フォーカス：TypeScriptマスター with React』

この記事の著者については下記リンクをチェック

◆ Amazon著者ページ：https://www.amazon.co.jp/stores/author/B099Z51QF2

公式サイト：https://monotein.com
Twitter：https://twitter.com/monotein_

◆ React、Next.js、TypeScriptなどのお役立ち情報や実践的コンテンツを、ビギナー向けにかみ砕いて無料配信中。メルマガ登録はこちらから → https://monotein.com/register-newsletter