【TypeScript】【Mapped Types】とは？

はじめに

この記事は【TypeScript】+【Mapped Types】についての備忘録である。

【Mapped Types】とは

Index signature（インデックス型）では設定時はどのようなキーも自由に設定できてしまい、アクセス時は毎回 undefined かどうかの型チェックが必要であるが、入力の形式が決まっているのであれば【Mapped Types】の使用を検討できる。
【Mapped Types】は主にユニオン型と組み合わせて使用される。

type SystemSupportLanguage = "en" | "fr" | "it" | "es";
type Butterfly = {
  [key in SystemSupportLanguage]: string;
};

プロパティを読み取り専用にするユーティリティ型 Readonly<T> も【Mapped Types】で実現されている。

// Readonly<T> ユーティリティ型
type Readonly<T> = {
  // keyof T はオブジェクトのキーをユニオン型に変更する
  readonly [P in keyof T]: T[P];
};

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

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

type KeyValues = {
  [K in string]: string;
};
type Name = {
  name: string; // 追加のプロパティ
};
type KeyValuesAndName = KeyValues & Name;
// 上記は以下と同じ意味である
type KeyValuesAndName = {
  [K in string]: string;
} & {
  name: string; // 追加のプロパティ
};