TypeScriptでネストした型を攻略！Mapped Typesの応用テクニックを解説

1. TypeScriptの型とMapped Typesの基本

1. TypeScriptの型とMapped Typesの基本

TypeScriptは、プログラムの安全性を高めるために、変数やデータの形を決める「型（Type）」という概念を使います。例えば、この箱には数字しか入れない、といったルールを厳格に管理できるのです。その中でも、Mapped Types（マップドタイプ）は、既存の型のすべての項目に対して、新しいルールをまとめて適用できる魔法のような機能です。

例えば、あるデータ型のすべての項目を、後から書き換えられないように変更したい場合、一つずつ修正するのは大変ですよね。Mapped Typesを使えば、コードを一行書くだけで、全ての項目を自動的に書き換えることができます。

2. ネストした型とはどのようなものか

2. ネストした型とはどのようなものか

ネストとは、日本語で「入れ子」という意味です。データの世界では、箱の中にさらに箱が入っているような状態を指します。TypeScriptの型においても、ユーザー情報という大きな型の中に、住所や連絡先といった小さな型が入り込んでいる構造をよく見かけます。

こうした構造をそのままMapped Typesで操作しようとしても、実は一番外側しか変更されず、奥深くにある型まではルールが届かないという問題が発生します。初心者の方が最初につまずきやすいポイントですが、これを解決するために「再帰」という考え方を取り入れます。

3. 再帰的な型定義の考え方

3. 再帰的な型定義の考え方

再帰とは、ある処理の中で自分自身をもう一度呼び出す仕組みのことです。例えば、箱の中を開けて、中身がもし箱だったら、その箱をまた開けるという作業を繰り返すイメージです。この考え方をTypeScriptに当てはめると、型が複雑にネストしていても、奥底にあるデータまで一つずつルールを適用し続けることができます。

まずは、単純なMapped Typesの例を見てみましょう。全ての項目をオプショナル（省略可能）にする基本のコードです。

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

type OptionalUser = {
    [K in keyof User]?: User[K];
};

このコードでは、User型の全ての項目（K）に対して、?をつけて省略可能にしています。ここから、いよいよ深いネストに対応するコードへと発展させていきます。

4. DeepPartialを使って奥深くの型を操作する

4. DeepPartialを使って奥深くの型を操作する

ネストした構造に対して、すべての項目を自動的にオプショナルにするには、DeepPartialという独自の型を自分で作ります。これはTypeScriptの標準機能ではありませんが、開発現場で非常によく使われるテクニックです。

再帰の考え方を用いて、項目がさらにオブジェクト（別の箱）であれば、自分自身を呼び出してさらに奥の項目をオプショナルにするというロジックを組みます。

type DeepPartial<T> = {
    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
};

type DeepOptionalUser = DeepPartial<{
    name: string;
    info: {
        address: string;
        zipCode: number;
    };
}>;

このように書くことで、nameだけでなく、infoの中にあるaddressやzipCodeまでも一括でオプショナルに変更できます。これがTypeScriptにおけるネスト型攻略の基本です。

5. Readonlyをネストした型に適用する

5. Readonlyをネストした型に適用する

次は、全てのデータを読み取り専用にするReadonlyをネストした型に適用してみましょう。データの誤書き換えを防ぎたいときに非常に役立ちます。先ほどのDeepPartialの考え方を応用すれば、簡単に作ることができます。

type DeepReadonly<T> = {
    readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P];
};

type ReadonlyUser = DeepReadonly<{
    id: number;
    profile: {
        nickname: string;
    };
}>;

このDeepReadonlyを使うと、profileの中身であるnicknameも変更不能になります。大規模なアプリケーション開発では、このようにデータの不変性を保つことがバグを防ぐ鍵となります。

6. 型のユーティリティを活用した実践的な開発

6. 型のユーティリティを活用した実践的な開発

TypeScriptには、あらかじめ便利なユーティリティ型が用意されています。これらを組み合わせることで、Mapped Typesをさらに強力に使いこなせます。例えば、特定の項目だけを取り除いたり、必要な項目だけを選んだりする操作です。

もし、ネストした型の一部だけを修正したい場合や、条件によって型を切り替えたい場合は、Mapped Typesと条件分岐を組み合わせたConditional Types（条件付き型）を活用します。これにより、プログラムの柔軟性が格段に向上します。

プログラミングを始めたばかりのときは、まずは一つの層だけで試してみて、慣れてきたら今回紹介した再帰を用いた深い階層の操作に挑戦してみてください。最初は難しく感じるかもしれませんが、この仕組みを理解すると、他のプログラミング言語でも同じような考え方ができるため、非常に強力なスキルになります。少しずつコードを書いて、試行錯誤しながら、TypeScriptの型システムの奥深さを体感していきましょう。