blog-hero-img

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

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のジェネリクスはむずかしい?

下記のようなTKの入ったTypeScriptのコードを「ジェネリクス」といいます。

function example<T, K>(a: T, b: K): [T, K]{
    return [a, b]
}

TKが入っていて、見た目だけですでに難しく感じます。

実際ジェネリクスに苦手意識を感じている人は世界中にたくさんいます。

しかし、ひとつひとつ理解をしていけば実はシンプルなのがジェネリクスです。

4回に分けて紹介します。


この記事は全4回の1つ目です

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

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

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

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

ジェネリクスは何に使う?

ジェネリクスとは、「とりあえずの仮置きとして置かれた、実質的な中身のない型情報」のことです。

「型はあとで決める」という柔軟さと、複数のオブジェクトやfunctionに対して使い回すことのできる汎用性がジェネリクスのメリットになります。

とはいえ、このような言葉の説明ではわかりづらいのでコードで確認しましょう。

ジェネリクスを「型定義に対して使うもの(1回目/本記事)」と「functionに対して使うもの(2回目)」に分け、最後に「両方を合わせたケース(3回目)」と、「複数のジェネリクスの使い方(4回目)」を紹介します。

本記事で触れるのは1つ目の「型定義に対して使うもの」です。

ジェネリクスを型定義に対して使う

次のコードがあったとします

// main.ts

const userOne: any = {
    data: "太郎",
    color: "赤"
}

anyの代わりに、しっかりした型定義を用意しましょう。

// main.ts

// ⬇追加
type User = {
    data: string;
    color: string;
}
// ⬆追加

const userOne: User = {    // 修正
    data: "太郎",
    color: "赤"
}

しかしもしここで、次のような2つ目のデータがあると、この型定義ではエラーが出ます。userTwodataの型がnumberだからです。

// main.ts

type User = {
    data: string;
    color: string;
}

const userOne: User = {
    data: "太郎",
    color: "赤"
}

// ⬇追加
const userTwo: User = {
    data: 2002,
    color: "緑"
}
// ⬆追加

なので型定義Userをもっと抽象化して、より広く使えるようにしましょう。

次の変更を加えてください。

// main.ts

type User<T> = {           // 変更
    data: T;               // 変更
    color: string;
}

const userOne: User = {
    ...

<T>は仮置きの型、実質的な中身のない型に過ぎません。

これを意味あるものにするには、実際の型を注入する必要があります。次のコードを追加しましょう。

// main.ts

type User<T> = {
    data: T;
    color: string;
}

const userOne: User<string> = {       // 追加
    data: "太郎",
    color: "赤"
}

const userTwo: User<number> = {         // 追加
    data: 2002,
    color: "赤"
}

これが型定義対して使うジェネリクスです(型引数/Type parametersとも呼ばれます)。

一般的には<T><K><U>などが使われますが、<ArgType><Name>など任意の文字でも大丈夫です。

次の記事では「functionに対するジェネリクス」を解説します。


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

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

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

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

販売ページに移動する

Profile Pic

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


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