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

最初にお知らせです。

『TypeScriptをReactで使う』に徹底フォーカスした動画コースをリリースしました。

くわしくは▼ 

monotein.base.shop/p/00006（Baseショップ）

monotein.booth.pm/items/6837870（Boothショップ）

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の両方に対してジェネリクス」を使う例を見ましょう。

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

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

React + TS徹底フォーカス：TypeScriptマスター with React

【TypeScriptをReactでつかうことに徹底フォーカス。2024年の開発現場で必須のスキルを最短で学べる一冊】

販売ページに移動する