blog-hero-img

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

pen-icon2024.3.16

この記事は約3分で読めます

Profile Pic

この記事の筆者:三好アキ


🔹 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。

🔹 Amazonベストセラー1位を複数回獲得している『はじめてつくるReactアプリ with TypeScript』著者。


Amazon著者ページはこちら → amazon.co.jp/stores/author/B099Z51QF2



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

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の横のstringTに変えます。

// 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年の開発現場で必須のスキルを最短で学べる一冊】

販売ページに移動する

Profile Pic

メルマガ配信中
(from 三好アキ/エンジニア)


React、Next.js、TypeScriptなど最新のウェブ開発のお役立ち情報を、ビギナー向けにかみ砕いて無料配信中。
(*配信はいつでも停止できます)