第18關：Tuple to Union

關卡簡介

Implement a generic TupleToUnion<T> which covers the values of a tuple to its values union.

實現一個泛型 TupleToUnion<T>，將元組的值轉換為它的值的聯合型別。

任務說明：

type Arr = ['1', '2', '3']

type Test = TupleToUnion<Arr> // expected to be '1' | '2' | '3'

接下來，你的任務是讓下面的type cases測試通過：

type cases = [
  Expect<Equal<TupleToUnion<[123, '456', true]>, 123 | '456' | true>>,
  Expect<Equal<TupleToUnion<[123]>, 123>>,
]

冒險指南：

從以下幾個方向來思考：

• 型別推斷 (Type Inference)：在處理 TypeScript 的泛型時，熟練運用型別推斷可以幫助你正確地推導出聯合型別。

• 索引訪問型別 (Indexed Access Types)：使用索引訪問來提取元組中的值。可以通過索引符號 T[number] 來將元組轉換為其值的聯合型別。

  • T[number] is a type that represents the union of all the types of the elements in the array (or tuple) T.
    • Indexed Access Type: T[number] is an example of an indexed access type. When you have an array or tuple type T, using T[number] means you are accessing the type of any element within that array or tuple.
    • Union of Element Types: The result is a union of the types of all elements in the array or tuple.

通關方式：

解法1:

type TupleToUnion<T> = T extends readonly (infer Items)[] ? Items : never

細節分析：

• 條件型別 (Conditional Types)：使用 T extends readonly (infer Items)[] 的形式來判斷型別 T 是否為一個陣列。
• 型別推斷 (Type Inference)：infer Items 用於推斷出陣列中的元素型別，並將它賦值給 Items。
• 聯合型別 (Union Types)：通過這種推斷，我們可以將元組中的所有元素提取出來，組合成聯合型別。如果 T 不是陣列，則回傳 never。

解法2:

// type TupleToUnion<T extends readonly any[]> = T[number] 

細節分析：

• 索引訪問型別 (Indexed Access Types)：T[number] 是一個簡潔的 TypeScript 語法，它用來訪問元組 T 的所有元素，並將它們自動組合成聯合型別。
• 泛型約束 (Generic Constraints)：T extends any[] 確保 T 是一個陣列或元組。T[number] 會對陣列中的每個索引值進行遍歷，並提取出元素值。

這樣，我們就能順利通過測試啦 🎉 😭 🎉

總結：

本次介紹了 Tuple to Union 的實作，下一關會挑戰 Last of Array，期待再相見！