オブジェクトからキーの型を生成する

オブジェクトからキーだけ欲しい

あるメッセージが言語ごとに定義されているとします。
1
const conf = {
2
en: 'Are you sure?',
3
fr: 'Êtes-vous sûr?',
4
es: 'Está seguro?',
5
ja: 'よろしいですか?',
6
zh: '您确定吗?'
7
};
Copied!
内容は確認を促す変哲もないシステムのメッセージです。このオブジェクトを使ってシステムがサポートしている言語の一覧を作ります。次のようなユニオン型が今回の目的です。
1
type Language = 'en' | 'fr' | 'es' | 'ja' | 'zh';
Copied!

typeof

頻出するこの typeof はJavaScriptのものではなく、TypeScriptの typeof です。これをオブジェクトに対して使用している例は前のページにあるとおりです。
この例で実行すれば次のような型 TypeOfLanguage が生成されるでしょう (型名は便宜的なものです) 。
1
type TypeOfLanguage = typeof conf;
2
// ->
3
// {
4
// en: string,
5
// fr: string,
6
// es: string,
7
// ja: string,
8
// zh: string
9
// };
Copied!
ここまでくればあとは少しです。 TypeOfLanguage 型のキーだけを型にしてしまいます。

keyof

kyeof はオブジェクトの型に使うとそのオブジェクトのキーをユニオン型にして返します。上記の TypeOfLanguage 型があれば
1
type Langauge = keyof TypeOfLanguage;
2
// -> 'en' | 'fr' | 'es' | 'ja' | 'zh';
Copied!
となります。

まとめ

見た目が少々いびつですが、次でオブジェクトから希望するキーのユニオン型を生成できます。
1
type Language = keyof typeof conf;
Copied!

疑問: keyof conf じゃダメなんですか?

動作しません。なぜなら keyof は値ではなく (オブジェクトの) 型に対して使用できるからです。一方 typeof は値から型を生成するのでこの順番で使用する必要があります。
最終更新 11d ago