TypeScriptのMapped Typesとジェネリクスの組み合わせ例をわかりやすく解説！初心者でも理解できる型変換の仕組み

1. Mapped Types（マップド型）とは？

1. Mapped Types（マップド型）とは？

TypeScriptのMapped Types（マップド型）とは、既存の型（オブジェクト型）をもとにして、新しい型を動的に作る仕組みです。英語で「Map（マップ）」とは“対応付ける”という意味があり、ある型のプロパティを別の形に変換することができます。

例えば、オブジェクトのすべてのプロパティを「読み取り専用（readonly）」にしたり、「任意（optional）」にしたりすることができます。TypeScriptには標準でReadonly<T>やPartial<T>などのマップド型が用意されています。

type User = {
    name: string;
    age: number;
};

type ReadonlyUser = Readonly<User>;

const user: ReadonlyUser = {
    name: "Taro",
    age: 20
};

// user.age = 25; // エラー！読み取り専用なので変更できない

このように、Mapped Typesを使うと元の型をもとに自動的に新しい型を生成できます。

2. ジェネリクスとMapped Typesを組み合わせるとは？

2. ジェネリクスとMapped Typesを組み合わせるとは？

ジェネリクス（Generics）とは、型をパラメータとして扱える仕組みのことです。関数や型、クラスを定義する際に「どんな型でも使えるように」設計できます。

Mapped Typesとジェネリクスを組み合わせると、「どんな型でも変換できる型」を作ることが可能になります。

type Optional<T> = {
    [K in keyof T]?: T[K];
};

type Person = {
    name: string;
    age: number;
};

type OptionalPerson = Optional<Person>;

このコードでは、Optional<T>というジェネリック型を定義しています。Tはどんなオブジェクト型でも受け取ることができ、[K in keyof T]という構文を使って、すべてのプロパティを「任意（?）」にしています。

    // OptionalPersonの型は次のようになります
    {
        name?: string;
        age?: number;
    }

このように、ジェネリクスとMapped Typesを組み合わせることで、「入力された型に応じて動的に別の型を生成する」ことができます。

3. keyofとinの仕組みを理解しよう

3. keyofとinの仕組みを理解しよう

Mapped Typesでよく使う構文に、keyofとinがあります。

• keyof：オブジェクト型のすべてのキー（プロパティ名）を取得します。
• in：指定したキー一覧をループして、新しい型を作るために使います。

例えば、次のようなジェネリック型を考えてみましょう。

type Nullable<T> = {
    [K in keyof T]: T[K] | null;
};

type Product = {
    id: number;
    name: string;
};

type NullableProduct = Nullable<Product>;

この例では、すべてのプロパティに| nullを追加しています。つまり、「値が存在しない」場合も許容できる型になります。

    // NullableProduct の型は次のようになります
    {
        id: number | null;
        name: string | null;
    }

このように、Mapped Typesは「すべてのプロパティに対して同じルールを適用したい」ときにとても便利です。

4. 実用的なMapped Typesとジェネリクスの応用例

4. 実用的なMapped Typesとジェネリクスの応用例

実際の開発では、サーバーとの通信やデータ処理の中で、部分的に更新したり、入力データをバリデーションしたりする場面で活用できます。

たとえば、APIに送る「更新データ」では、すべての項目を送らなくてもいい場合があります。そのようなケースでは、Partial<T>のようなMapped Typesが役立ちます。

function updateUser(user: Partial<{ name: string; age: number }>) {
    if (user.name) {
        console.log("名前を更新します:", user.name);
    }
    if (user.age) {
        console.log("年齢を更新します:", user.age);
    }
}

updateUser({ name: "Hanako" });

    名前を更新します: Hanako

このように、Mapped Typesとジェネリクスを組み合わせることで、「柔軟で安全な型設計」ができるようになります。

5. 独自のMapped Typeを作ってみよう

5. 独自のMapped Typeを作ってみよう

自分だけのマップド型を作ることも可能です。例えば、データをすべて文字列に変換する型を作ってみましょう。

type ToStringProps<T> = {
    [K in keyof T]: string;
};

type Info = {
    id: number;
    isActive: boolean;
};

type StringInfo = ToStringProps<Info>;

    // StringInfo の型は次のようになります
    {
        id: string;
        isActive: string;
    }

このように、ジェネリクスを組み合わせることで、どんなオブジェクト型でも簡単に変換できます。まるで「型を自動で作り直すマシン」のように使えるのがMapped Typesの魅力です。

6. Mapped Types × Genericsで型の自動変換を理解しよう

6. Mapped Types × Genericsで型の自動変換を理解しよう

Mapped Typesとジェネリクスを組み合わせることで、TypeScriptの型システムをより柔軟に扱えるようになります。これは、現代的なTypeScript開発において非常に重要な考え方です。型を「動的に生成」することで、より安全でメンテナンス性の高いコードを書くことができます。

まとめ

まとめ

Mapped Typesとジェネリクスを通して理解した型変換の考え方

この記事では、TypeScriptにおけるMapped Types（マップド型）とジェネリクス（Generics）を組み合わせた型設計について、基礎から応用までを丁寧に見てきました。Mapped Typesは、すでに存在する型をもとにして、新しい型を自動的に生成する仕組みです。これにより、同じような構造の型を何度も手作業で定義する必要がなくなり、コード全体の見通しが非常に良くなります。

特に重要なのは、「型もプログラムの一部として設計する」という考え方です。TypeScriptでは、実行時の処理だけでなく、型の段階でどこまで安全性を高められるかが大きなポイントになります。Mapped Typesとジェネリクスを使えば、「すべてのプロパティを任意にする」「すべてのプロパティを読み取り専用にする」「すべての値を別の型に変換する」といった処理を、型レベルで一括して表現できます。

keyofとinが果たす役割の重要性

Mapped Typesの中心となる構文が、keyofとinです。keyofはオブジェクト型のプロパティ名をすべて取り出し、その集合を型として扱えるようにします。そしてinを使うことで、それらのキーを一つずつ処理しながら新しい型を作成できます。

この仕組みは、JavaScriptの配列処理やオブジェクト操作に少し似ていますが、実際に値を処理しているわけではなく、型そのものを変換している点が大きな特徴です。この発想に慣れることで、TypeScriptの型システムが一気に理解しやすくなります。

実務でMapped Typesが活躍する場面

実際の開発現場では、API通信やフォーム入力、データ更新処理などで「すべての項目が必須ではない」「一部のプロパティだけ変更したい」といった場面が頻繁に登場します。こうしたケースで、Partial<T>や独自に定義したMapped Typesを使うことで、柔軟かつ安全なデータ構造を表現できます。

また、プロジェクトが成長して型の数が増えてきたときにも、Mapped Typesを使って共通ルールを型としてまとめておくことで、修正箇所を最小限に抑えることができます。これは、長期的な保守性を考えるうえで非常に大きなメリットです。

サンプルで振り返るMapped Typesとジェネリクス

type ApiResponse<T> = {
    [K in keyof T]: T[K] | null;
};

type User = {
    id: number;
    name: string;
    email: string;
};

type NullableUser = ApiResponse<User>;

const user: NullableUser = {
    id: 1,
    name: null,
    email: "test@example.com"
};

この例では、ジェネリクスで受け取った型に対してMapped Typesを適用し、すべてのプロパティを「元の型またはnull」に変換しています。こうした型は、APIレスポンスや初期データの表現など、実務で非常によく使われます。