お題
タプルを受け取り、その各値のkey/valueを持つオブジェクトの型に変換する型TupleToObjectを実装する。
やりたいこと
const tuple = ["A", "B", "C", "D"] as const
type reault = TupleToObject<T>
// expected { "A":"A", "B":"B", "C":"C", "D":"D" }
解答
type TupleToObject<T extends readonly any[]> = {
[V in T[number]]: V
}
解説
処理の流れ
-
<T extends readonly any[]>
Tは読み取り専用の配列のみに制約。
→ 単純な配列の型ではなく、配列の具体的な中身を受け取りたいから。 -
[V in T[number]]
配列の中身を全てユニオン型で取得 -
{ [V in T[number]]:V }
Mapped Typesでオブジェクトを生成。
そもそもタプルとは...
- 特定の型と順序を持つ要素の集まり。
配列とは異なり、各要素の型を個別に指定できる。
const Person:[string, number] = ["Tom", 20]
// 1番目は文字列、2番目は数値と固定された構造
constアサーション（as const）とは...
- オブジェクト・配列の末尾に
as constと記述することにより、全ての値をreadonly（読み取り専用）にする。 - ネストされたオブジェクトに対しても、全ての値が
readonlyになる。
const color = ["red", "blue", "green", "yellow", "purple"] as const;
// readonly ["red", "blue", "green", "yellow", "purple"]
typeof演算子とは...
- 変数から型を抽出する型演算子。
typeof "Hello World"; // => "string"
typeof 0; // => "number"
typeof true; // => "boolean"
const Person = {
name: "Tom",
age: 20
};
typeof Person; // => { name: string, age: number };
const color = ["red", "blue", "green", "yellow", "purple"];
typeof color // => string[]
- nullの判別に注意
値がnullの場合の演算結果は、"null"ではなく"object"になる。
[number]とは...
- タプルの要素の型をユニオン型で抽出する。
const color = ["red", "blue", "green", "yellow", "purple"] as const;
type result = (typeof color)[number];
// expected "red" | "blue" | "green" | "yellow" | "purple"
Mapped Typesとは...
参考記事
タプル
constアサーション
- constアサーション「as const」 | TypeScript入門『サバイバルTypeScript』
- keyof と typeof をすこ〜し細かく解説！後輩の質問から得たTypeScriptの知識| Qiita
typeof演算子
[number]
今回の問題