オブジェクトからプロパティの型を生成する
#
オブジェクトからプロパティだけ欲しい前ページとは対照的にオブジェクトからプロパティだけのユニオン型を得ることを目的とします。今回も前回と同様に次のメッセージが定義されているとします。
typescript
const conf = {en: "Are you sure?",fr: "Êtes-vous sûr?",es: "Está seguro?",ja: "よろしいですか?",zh: "您确定吗?",};
typescript
const conf = {en: "Are you sure?",fr: "Êtes-vous sûr?",es: "Está seguro?",ja: "よろしいですか?",zh: "您确定吗?",};
最終的には次のようなユニオン型が今回の目的です。
typescript
type ConfirmationMessage =| "Are you sure?"| "Êtes-vous sûr?"| "Está seguro?"| "よろしいですか?"| "您确定吗?";
typescript
type ConfirmationMessage =| "Are you sure?"| "Êtes-vous sûr?"| "Está seguro?"| "よろしいですか?"| "您确定吗?";
#
今回の問題を解くにあたって今回は今まで紹介してきたオブジェクトから型を作り出す方法と Mapped type の合わせ技で再現することができます。
アプローチの方法としてはまずオブジェクトからキーの型を生成し Mapped type を使いオブジェクトのプロパティの型を参照、それらをリテラル型で取得します。
#
キーの型を生成するキーの型の生成は前のページにあるものと同一です。次のようにすることでキーである言語のユニオン型を取得できます。詳細についてはオブジェクトからキーの値を生成するのページをご覧ください。
typescript
type Language = keyof typeof conf;// -> 'en' | 'fr' | 'es' | 'ja' | 'zh'
typescript
type Language = keyof typeof conf;// -> 'en' | 'fr' | 'es' | 'ja' | 'zh'
#
Mapped typeオブジェクトのプロパティの型を参照するために Mapped type を使います。そのとき元のオブジェクトから型を生成するために typeof
を使います。
typescript
type ConfirmationMessage = typeof conf[Language];
typescript
type ConfirmationMessage = typeof conf[Language];
#
リテラル型を取得するできるようにするこのままだとオブジェクトから型を生成すると同じように型はリテラル型ではありません。つまりただの string
型のユニオン型つまり string
型です。そこで、元のオブジェクト conf
に as const
をつけます。
typescript
const conf = {en: "Are you sure?",fr: "Êtes-vous sûr?",es: "Está seguro?",ja: "よろしいですか?",zh: "您确定吗?",} as const;
typescript
const conf = {en: "Are you sure?",fr: "Êtes-vous sûr?",es: "Está seguro?",ja: "よろしいですか?",zh: "您确定吗?",} as const;
#
まとめお好みで定義したキーの型 Language
を Mapped type のキーの部分に代入します。最終的な形は次のようになります。
typescript
const conf = {en: "Are you sure?",fr: "Êtes-vous sûr?",es: "está seguro?",ja: "よろしいですか?",zh: "您确定吗?",} as const;type ConfirmationMessage = typeof conf[keyof typeof conf];
typescript
const conf = {en: "Are you sure?",fr: "Êtes-vous sûr?",es: "está seguro?",ja: "よろしいですか?",zh: "您确定吗?",} as const;type ConfirmationMessage = typeof conf[keyof typeof conf];
as const
を忘れないようにしてください。