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

TypeScriptのジェネリクスはむずかしい？

この記事はジェネリクスをサクッと解説する全4回の記事の2つ目です。

1 → TypeScriptジェネリクスをサクッと理解【その１ 型定義に対して使うジェネリクス】

*2（本記事）→ TypeScriptジェネリクスをサクッと理解【その２ functionに対して使うジェネリクス】

3 → TypeScriptジェネリクスをサクッと理解【その３ 型定義とfunction両方に対して使うジェネリクス】

4 → TypeScriptジェネリクスをサクッと理解【その４ 複数のジェネリクスをつかう】

⚫︎ monotein.base.shop/p/00005

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に対するジェネリクスが分かると、TypeScript × Reactのコードはよりはっきり読めるようになります。

イベントの型やZod、開発環境のセットアップまで含め、TypeScript × React開発の全体像を一本でまとめたガイドはこちらです▼

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

⚫︎ monotein.base.shop/p/00005