TypeScript 類型挑戰：元組轉換為對象

作者：CUGGZ 2022-05-19 09:01:08

一些前端面試中考察到了 TypeScript 高級類型的定義，本系列主要解答來自 Type Challenges 項目中的 TS 類型挑戰問題，以此更好的了解 TS 的類型系統，編寫自己的類型工具，更好的應對前端面試。

高質量的類型可以提高項目的可維護性并避免一些潛在的漏洞。

下面來看一個難度為簡單的題目：元組轉換為對象

題目描述

傳入一個元組類型，將這個元組類型轉換為對象類型，這個對象類型的鍵/值都是從元組中遍歷出來。

例如：

const tuple = ['tesla', 'model 3', 'model X', 'model Y'] as const

type result = TupleToObject<typeof tuple> 
// expected { tesla: 'tesla', 'model 3': 'model 3', 'model X': 'model X', 'model Y': 'model Y'}

題目解答

我們需要從數組中獲取所有值，并將其作為新對象中的鍵和值。

首先我們知道什么是元組，來看TypeScript 對元組的定義：

元組類型是另一種Array類型，它確切地知道包含多少個元素，以及它在特定位置包含哪些類型。

這意味著我們可以檢查length并得到確切的數字：

const fullName:[first: string, last: string] = ['hello', 'world'];
const range:[start: number, end: number] = [0, 10];
const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as const;

type FullNameLength = (typeof fullName)['length'] // 2
type RangeLength = (typeof range)['length']       // 2
type DigitsLength = (typeof digits)['length']     // 10

而在數組中就無法實現這一點：

const fullName:string[] = ['hello', 'world'];
const range:number[] = [0, 10];

type FullNameLength = (typeof fullName)['length'] // number
type RangeLength = (typeof range)['length']       // number

可以使用映射類型來遍歷對象：

type MappedType<T> = {
  [Key in keyof T]: T[Key];
};

keyof T用于從對象類型T中獲取鍵值 key;
in用于對對象鍵值key進行迭代;
Key 就是對象鍵值 key 本身;
T[Key]是指定 Key 的值;

我們使用索引訪問類型來遍歷元組，可以通過T[number]從元組中獲取值。具體實現如下：

type TupleToObject<T> = {
    [Value in T[number]]: Value;
};

T[number] 用于從元組 T 中獲取值;
in 用于迭代元組值;
Value 是元組元素，用作構建對象的key和value。

但是這時候報錯了：

這時就需要約束泛型的類型，最終的實現如下：

type TupleToObject<T extends readonly any[]> = {
    [Value in T[number]]: Value;
};

這里的extends readonly any[] 是調用T[number] 所必須的，用來約束 T 的類型，T是一個元組，元組元素是只讀的。

Type Challenges：https://github.com/type-challenges/type-challenges

責任編輯：武曉燕來源：前端充電寶

TypeScript 元組對象