メインコンテンツまでスキップ

Mapped Types

インデックス型では設定時はどのようなキーも自由に設定できてしまい、アクセス時は毎回undefinedかどうかの型チェックが必要です。入力の形式が決まっているのであればMapped Typesの使用を検討できます。

Mapped Typesは主にユニオン型と組み合わせて使います。先ほどシステムがサポートする言語を定義しました。

ts
type SystemSupportLanguage = "en" | "fr" | "it" | "es";
ts
type SystemSupportLanguage = "en" | "fr" | "it" | "es";

これをインデックス型と同じようにキーの制約として使用することができます。

ts
type Butterfly = {
[key in SystemSupportLanguage]: string;
};
ts
type Butterfly = {
[key in SystemSupportLanguage]: string;
};

このようにButterflyを定義するとシステムがサポートしない言語、ここではdeが設定、使用できなくなります。

ts
const butterflies: Butterfly = {
en: "Butterfly",
fr: "Papillon",
it: "Farfalla",
es: "Mariposa",
de: "Schmetterling",
Type '{ en: string; fr: string; it: string; es: string; de: string; }' is not assignable to type 'Butterfly'. Object literal may only specify known properties, and 'de' does not exist in type 'Butterfly'.2322Type '{ en: string; fr: string; it: string; es: string; de: string; }' is not assignable to type 'Butterfly'. Object literal may only specify known properties, and 'de' does not exist in type 'Butterfly'.
};
ts
const butterflies: Butterfly = {
en: "Butterfly",
fr: "Papillon",
it: "Farfalla",
es: "Mariposa",
de: "Schmetterling",
Type '{ en: string; fr: string; it: string; es: string; de: string; }' is not assignable to type 'Butterfly'. Object literal may only specify known properties, and 'de' does not exist in type 'Butterfly'.2322Type '{ en: string; fr: string; it: string; es: string; de: string; }' is not assignable to type 'Butterfly'. Object literal may only specify known properties, and 'de' does not exist in type 'Butterfly'.
};

プロパティを読み取り専用にするreadonlyをそのオブジェクトのすべてのプロパティに適用するReadonly<T>というユーティリティ型があります。他にもユーティリティ型はありますが、それらについては専門のページがありますのでここでは割愛します。

📄️ Readonly<T>

全プロパティを読み取り専用にする

Readonly<T>もこの機能で実現されています。Readonly<T>は次のように実装されています。

ts
type Readonly<T> = {
readonly [P in keyof T]: T[P];
};
ts
type Readonly<T> = {
readonly [P in keyof T]: T[P];
};

keyof Tという見慣れない表現が登場しましたが、これはオブジェクトのキーをユニオン型に変更するものだと解釈してください。keyofの詳細は型演算子をご覧ください。

📄️ keyof型演算子

keyofはオブジェクト型からプロパティ名を型として返す型演算子です。たとえば、nameプロパティを持つ型に対して、keyofを使うと文字列リテラル型の"name"が得られます。

インデックス型と異なるところ

Mapped Typesはインデックス型と異なりsymbol型もキーにすることができます。

ts
type Identifier = symbol | 1;
type Sample = {
[P in Identifier]: string;
};
 
const sample: Sample = {
1: "pork",
[Symbol("thick")]: "thin",
};
ts
type Identifier = symbol | 1;
type Sample = {
[P in Identifier]: string;
};
 
const sample: Sample = {
1: "pork",
[Symbol("thick")]: "thin",
};

Mapped Typesには追加のプロパティが書けない

Mapped Typesは追加のプロパティが定義できません。ここは、インデックス型とは異なる点です。

ts
type KeyValuesAndName = {
[K in string]: string;
name: string; // 追加のプロパティ
A mapped type may not declare properties or methods.7061A mapped type may not declare properties or methods.
};
ts
type KeyValuesAndName = {
[K in string]: string;
name: string; // 追加のプロパティ
A mapped type may not declare properties or methods.7061A mapped type may not declare properties or methods.
};

追加のプロパティがある場合は、その部分をオブジェクト型として定義し、Mapped Typesとインターセクション型を成す必要があります。

ts
type KeyValues = {
[K in string]: string;
};
type Name = {
name: string; // 追加のプロパティ
};
type KeyValuesAndName = KeyValues & Name;
ts
type KeyValues = {
[K in string]: string;
};
type Name = {
name: string; // 追加のプロパティ
};
type KeyValuesAndName = KeyValues & Name;

上の例は、ひとつの型にまとめることもできます。

ts
type KeyValuesAndName = {
[K in string]: string;
} & {
name: string; // 追加のプロパティ
};
ts
type KeyValuesAndName = {
[K in string]: string;
} & {
name: string; // 追加のプロパティ
};
  • 質問する ─ 読んでも分からなかったこと、TypeScriptで分からないこと、お気軽にGitHubまで🙂
  • 問題を報告する ─ 文章やサンプルコードなどの誤植はお知らせください。