新聞中心
一些大廠在前端面試中也考察到了 TypeScript 高級(jí)類型的定義,本系列主要解答來自 Type Challenges 中的 TS 類型挑戰(zhàn)問題,以此更好的了解 TS 的類型系統(tǒng),編寫自己的類型工具。

為邛崍等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù),及邛崍網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)、邛崍網(wǎng)站設(shè)計(jì),以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求,就會(huì)得到認(rèn)可,從而選擇與我們長期合作。這樣,我們也可以走得更遠(yuǎn)!
下面來看一個(gè)難度為簡單的題目:實(shí)現(xiàn) Pick
題目描述
實(shí)現(xiàn) TS 內(nèi)置的 Pick,但不可以使用它。
從類型 T 中選擇出屬性 K,構(gòu)造成一個(gè)新的類型。
例如:
interface Todo {
title: string
description: string
completed: boolean
}
type TodoPreview = MyPick
const todo: TodoPreview = {
title: 'Clean room',
completed: false,
}題目解答
Pick 類型用于從T類型中選擇部分屬性K來構(gòu)造新的類型。
首先,我們需要遍歷對象 T。那就要使用映射類型來遍歷:
type MappedType= {
[Key in keyof T]: T[Key];
};
- keyof T用于從對象類型T中獲取鍵值 key;
- in用于對對象鍵值key進(jìn)行迭代;
- Key 就是對象鍵值 key 本身;
- T[Key]是指定 Key 的值;
然后,要想迭代獲取對象的某個(gè)部分,就需要指定要迭代的key:
type MappedType= {
[Key in Keys]: T[Key];
};
但是,這樣寫就會(huì)有兩個(gè)錯(cuò)誤:
- 不能將類型“Keys”分配給類型“string | number | symbol”。
- 類型“Key”無法用于索引類型“T”。
這兩個(gè)錯(cuò)誤都與迭代規(guī)則有關(guān):
- key 可以是string、number、symbol;
- 如果T中不存在Key,就不能調(diào)用T[Key]。
如果規(guī)則 2 成立,那么規(guī)則 1 一定是成立的,因?yàn)楝F(xiàn)有的 keys 是指定類型之一。為了迭代現(xiàn)有的 key,我們需要使用extends關(guān)鍵字進(jìn)行約束。這樣,如果指定不存在的 key,TypeScript 將拋出一個(gè)錯(cuò)誤,如果T中不存在這個(gè) key,就不能調(diào)用T[key]。
Pick的實(shí)現(xiàn)如下:
type MyPick= {
[Key in Keys]: T[Key];
};
Type Challenges:https://github.com/type-challenges/type-challenges
本文題目:TypeScript 類型挑戰(zhàn):實(shí)現(xiàn) Pick
轉(zhuǎn)載來源:http://fisionsoft.com.cn/article/dhcjsse.html


咨詢
建站咨詢
