建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
一些前端面試中考察到了 TypeScript 高級(jí)類(lèi)型的定義，本系列主要解答來(lái)自 Type Challenges 項(xiàng)目中的 TS 類(lèi)型挑戰(zhàn)問(wèn)題，以此更好的了解 TS 的類(lèi)型系統(tǒng)，編寫(xiě)自己的類(lèi)型工具，更好的應(yīng)對(duì)前端面試。
在金華等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專(zhuān)注、極致的服務(wù)理念，為客戶(hù)提供成都網(wǎng)站建設(shè)、成都做網(wǎng)站 網(wǎng)站設(shè)計(jì)制作按需定制設(shè)計(jì),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),營(yíng)銷(xiāo)型網(wǎng)站建設(shè),成都外貿(mào)網(wǎng)站制作,金華網(wǎng)站建設(shè)費(fèi)用合理。
下面來(lái)看一個(gè)難度為簡(jiǎn)單的題目：元組轉(zhuǎn)換為對(duì)象
題目描述
傳入一個(gè)元組類(lèi)型，將這個(gè)元組類(lèi)型轉(zhuǎn)換為對(duì)象類(lèi)型，這個(gè)對(duì)象類(lèi)型的鍵/值都是從元組中遍歷出來(lái)。
例如：
const tuple = ['tesla', 'model 3', 'model X', 'model Y'] as const
type result = TupleToObject
// expected { tesla: 'tesla', 'model 3': 'model 3', 'model X': 'model X', 'model Y': 'model Y'}
題目解答
我們需要從數(shù)組中獲取所有值，并將其作為新對(duì)象中的鍵和值。
首先我們知道什么是元組，來(lái)看TypeScript 對(duì)元組的定義：
元組類(lèi)型是另一種Array類(lèi)型，它確切地知道包含多少個(gè)元素，以及它在特定位置包含哪些類(lèi)型。
這意味著我們可以檢查length并得到確切的數(shù)字：
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
而在數(shù)組中就無(wú)法實(shí)現(xiàn)這一點(diǎn)：
const fullName:string[] = ['hello', 'world'];
const range:number[] = [0, 10];
type FullNameLength = (typeof fullName)['length'] // number
type RangeLength = (typeof range)['length'] // number
可以使用映射類(lèi)型來(lái)遍歷對(duì)象：
type MappedType= {
[Key in keyof T]: T[Key];
};
- keyof T用于從對(duì)象類(lèi)型T中獲取鍵值 key;
- in用于對(duì)對(duì)象鍵值key進(jìn)行迭代;
- Key 就是對(duì)象鍵值 key 本身;
- T[Key]是指定 Key 的值;
我們使用索引訪(fǎng)問(wèn)類(lèi)型來(lái)遍歷元組，可以通過(guò)T[number]從元組中獲取值。具體實(shí)現(xiàn)如下：
type TupleToObject= {
[Value in T[number]]: Value;
};
- T[number] 用于從元組 T 中獲取值;
- in 用于迭代元組值;
- Value 是元組元素，用作構(gòu)建對(duì)象的key和value。
但是這時(shí)候報(bào)錯(cuò)了：
這時(shí)就需要約束泛型的類(lèi)型，最終的實(shí)現(xiàn)如下：
type TupleToObject= {
[Value in T[number]]: Value;
};
這里的extends readonly any[] 是調(diào)用T[number] 所必須的，用來(lái)約束 T 的類(lèi)型，T是一個(gè)元組，元組元素是只讀的。
Type Challenges：https://github.com/type-challenges/type-challenges
本文名稱(chēng)：TypeScript類(lèi)型挑戰(zhàn)：元組轉(zhuǎn)換為對(duì)象
標(biāo)題路徑：http://fisionsoft.com.cn/article/djioios.html
