はじめに
私はTypeScriptを学習中なのですが、先日下記ような書き方を目にして頭の中で「？」が広がりました。
practice.ts
type Countries = ["Japan", "America", "England", "Korea"];
type Country = Countries[number]
//type Country = "Japan" | "America" | "England" | "Korea"
タプル型のCountriesに[number]を指定することでCountryをユニオン型にすることができています。なぜ[number]を指定することでユニオン型にできるのかについてまとめたいと思います。
ユニオン型はnumberでインデックシングされている
結論から言うと、下記の型は同列と考えて良いです。
practice.ts
type CountriesTupple = ["Japan", "America", "England", "Korea"];
interface CountriesObj {
length:4,
0:"Japan",
1:"America",
2:"England",
3:"Korea"
}
タプル型のCountriesTuppleはnumberによってインデックシングされてCountriesObjと同じ扱いができる！
なるほど、前述したCountriesをCountryへユニオン型で入れることができたのは、このような理屈があったのですね。
lengthは[string]で指定できない
ここで「[string]で指定することでlengthがとれるのか？」ということが疑問に挙がると思います。ただこちら結論指定できないようです。
practice.ts
type Countries = ["Japan", "America", "England", "Korea"];
type Country = Countries[string]
//型 'Countries' には型 'string' と一致するインデックス シグネチャがありません。
type Country = Countries["length"]
//type Country = 4
上記のように怒られてしまいました。ただ["length"]で指定すると要素の数も取得できるようです。
まとめ
TypeScriptのタプル型をユニオン型にする方法をまとめました。初見で今回紹介した書き方を見たときは驚き戸惑いましたが、調べてみて理屈を知ることで理解することができました。これからもわからないことを調べ理解し自身の引き出しを増やせていけたらなと思います。
最後に
GoQSystemでは一緒に働いてくれる仲間を大募集中です！
ご興味がある方は以下リンクよりご確認ください。