配列から型を生成する

単位のように振る舞うことを期待されて定義されたコレクションは少なくないでしょう。今回はコレクションでも主に配列に焦点を当てそれらから型を生成する方法の紹介です。

通貨の配列から通貨の型を作りたい

国際的な外貨を使うことができるサービスを開発していたとします。サポートしている通貨を配列で保持しているとし次のようになっているとします。

ts
const currencies = ["CNY", "EUR", "GBP", "JPY", "KRW", "USD"];

ts
const currencies = ["CNY", "EUR", "GBP", "JPY", "KRW", "USD"];

このようなとき、このJavaScriptの資産をできるだけ変更せずに貨幣の型 (ユニオン型) を作ることができれば今後便利そうです。つまり次のようなユニオン型です。

ts
type Currency = "CNY" | "EUR" | "GBP" | "JPY" | "KRW" | "USD";

ts
type Currency = "CNY" | "EUR" | "GBP" | "JPY" | "KRW" | "USD";

typeof

これはJavaScriptのtypeofではなくTypeScriptのtypeofです。typeofはTypeScriptがその変数をどのような型であるかと認識しているかかを教えてくれます。

ts
const currencies = ["CNY", "EUR", "GBP", "JPY", "KRW", "USD"];
type Currency = typeof currencies;
// -> string[]

ts
const currencies = ["CNY", "EUR", "GBP", "JPY", "KRW", "USD"];
type Currency = typeof currencies;
// -> string[]

予想されている方が多かったかもしれませんがstring[]型と出てしまいました。ではこれをどうすればstringではなく定数値で取得できるでしょうか。それは定数値で取得したいオブジェクトにas constをつけると取得できます。

ts
const currencies = ["CNY", "EUR", "GBP", "JPY", "KRW", "USD"] as const;
type Currency = typeof currencies;

ts
const currencies = ["CNY", "EUR", "GBP", "JPY", "KRW", "USD"] as const;
type Currency = typeof currencies;

Currencyは次のようになります。

ts
type Currency = readonly ["CNY", "EUR", "GBP", "JPY", "KRW", "USD"];

ts
type Currency = readonly ["CNY", "EUR", "GBP", "JPY", "KRW", "USD"];

定数 (リテラル型) は取れましたが依然配列のままです。これをユニオン型で取るためには考え方を逆転させる必要があります。

何番目のリテラル型が欲しいか

たとえば'GBP'が欲しいとします。'GBP'は2番目なのでcurrenciesの2番目の型を取れば希望のリテラル型が取れます。

ts
const currencies = ["CNY", "EUR", "GBP", "JPY", "KRW", "USD"] as const;
type Currency = typeof currencies[2];
// -> 'GBP'

ts
const currencies = ["CNY", "EUR", "GBP", "JPY", "KRW", "USD"] as const;
type Currency = typeof currencies[2];
// -> 'GBP'

'GBP'を取ることができました。

すべてのリテラル型が欲しい

本題です。まさか次のようにするわけには行かないのでもっと賢い方法を考える必要があります。

ts
type Currency = typeof currencies[0] | typeof currencies[1] | typeof currencies[2] | ....

ts
type Currency = typeof currencies[0] | typeof currencies[1] | typeof currencies[2] | ....

そこで思いつくのはtypeofをしているときのインデックスです。実はこれもリテラル型でありcurrenciesの2のリテラル型を取ることを意味しています。

配列はnumber型のインデックスに要素を代入しているオブジェクトなのでこのリテラル型のインデックスの代わりにnumberを使うことによって

ts
const currencies = ["CNY", "EUR", "GBP", "JPY", "KRW", "USD"] as const;
type Currency = typeof currencies[number];
// -> 'CNY' | 'EUR' | 'GBP' | 'JPY' | 'KRW' | 'USD'

ts
const currencies = ["CNY", "EUR", "GBP", "JPY", "KRW", "USD"] as const;
type Currency = typeof currencies[number];
// -> 'CNY' | 'EUR' | 'GBP' | 'JPY' | 'KRW' | 'USD'

と希望のユニオン型を取得できます。