お題

タプルを受け取り、その各値の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とは...

参考記事

タプル

タプル | TypeScript入門『サバイバルTypeScript』

constアサーション

typeof演算子

typeof演算子 | TypeScript入門『サバイバルTypeScript』

[number]

配列からオブジェクトを生成する型を作ろうの解説 | mosya-TC

今回の問題