日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間:8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
TS類型體操:索引類型的映射再映射

比如這就是一個(gè)索引類型:

創(chuàng)新互聯(lián)服務(wù)緊隨時(shí)代發(fā)展步伐,進(jìn)行技術(shù)革新和技術(shù)進(jìn)步,經(jīng)過十多年的發(fā)展和積累,已經(jīng)匯集了一批資深網(wǎng)站策劃師、設(shè)計(jì)師、專業(yè)的網(wǎng)站實(shí)施團(tuán)隊(duì)以及高素質(zhì)售后服務(wù)人員,并且完全形成了一套成熟的業(yè)務(wù)流程,能夠完全依照客戶要求對(duì)網(wǎng)站進(jìn)行做網(wǎng)站、成都做網(wǎng)站、建設(shè)、維護(hù)、更新和改版,實(shí)現(xiàn)客戶網(wǎng)站對(duì)外宣傳展示的首要目的,并為客戶企業(yè)品牌互聯(lián)網(wǎng)化提供全面的解決方案。

type obj = {
name: string;
age: number;
gender: boolean;
}

索引類型可以添加修飾符 readonly(只讀)、?(可選):

type obj = {
readonly name: string;
age?: number;
gender: boolean;
}

我們知道,TypeScript 支持類型編程,也就是對(duì)類型參數(shù)(范型)做各種運(yùn)算,產(chǎn)生新的類型:

type IsString = T extends string ? true: false;

那么對(duì)于索引類型,如何做運(yùn)算并產(chǎn)生新的類型呢?

答案是映射類型。

映射類型

映射類型就是用于構(gòu)造新的索引類型的。

比如這個(gè) Record 類型:

type Record<
K extends string | number | symbol,
T> =
{ [P in K]: T; }

Record 類型構(gòu)造了一個(gè) key 為 stirng 或 number 或 symbol,而 value 為類型 T 的索引類型。它是 TS 內(nèi)置的高級(jí)類型。

在構(gòu)造新的索引類型的過程中,還可以做加上一些修飾符。

比如 ReadOnly:

type Readonly =  {
readonly [Key in keyof T]: T[Key];
}

它創(chuàng)建了一個(gè)新的索引類型,在原來索引類型的每個(gè)屬性上加上了 readonly 的修飾:

比如 Partial:

type Partial = {
[Key in keyof T]?: T[Key]
}

它創(chuàng)建了一個(gè)新的索引類型,在原來索引類型的每個(gè)屬性上加上了 ? 的修飾:

可以加上,當(dāng)然也可以去掉:

去掉可選(?):

type Required = {
[Key in keyof T]-?: T[Key]
}

去掉 readonly:

type NotReadOnly = {
-readonly [Key in keyof T]: T[Key]
}

過完這些例子,映射類型能干什么就比較清楚了:

映射類型可以生成新的索引類型,在生成過程中可以加上或去掉 readonly、? 的修飾符。內(nèi)置的 Record、ReadOnly、Required、Partial 等類型都是映射類型。

但是,現(xiàn)在的映射類型還是有局限性的,不能對(duì)索引名做修改、過濾等操作,功能還不夠強(qiáng)。

如果想實(shí)現(xiàn)過濾、轉(zhuǎn)換,那就得用到映射類型的重映射了。

重映射

重映射就是在索引后加一個(gè) as 語句,表明索引轉(zhuǎn)換成什么,它可以用來對(duì)索引類型做過濾和轉(zhuǎn)換。

比如過濾出類型為 string 的索引:

type FilterString = {
[Key in keyof T as T[Key] extends string ? Key: never]: T[Key];
}

返回 never 代表過濾掉,否則保留。

還可以對(duì)索引做轉(zhuǎn)換,比如修改索引名,加上 get:

type Getters> = {
[Key in keyof T as `get${Capitalize}`]: T[Key];
}

T extends xxx 是給類型參數(shù)的約束,表示只能傳入這種類型。這里的 Record 類型是生成索引類型的,我們上面介紹過,所以 T extends Record 就是約束了這里只能傳入索引類型。

as 后面是把索引轉(zhuǎn)換成什么,我們是在原來的基礎(chǔ)上做了修改,加上了 get,并且后面內(nèi)容首字母大寫,這個(gè) Capitalize 也是 TS 內(nèi)置的類型。

效果如下:

這兩個(gè)例子分別說明了重映射 as 可以用來做索引類型的過濾和轉(zhuǎn)換,可以對(duì)索引類型做更靈活的編程。

比如,實(shí)現(xiàn) key 和 value 的互換:

type Flip> = {
[Key in keyof T as `${T[Key]}`]: Key
}

支持重映射之后,映射類型可以對(duì)索引類型做更多的修改。

總結(jié)

TypeScript 通過索引類型來表示有多個(gè)元素的聚合類型,比如數(shù)組、對(duì)象等。

TS 支持類型編程,也就是對(duì)類型參數(shù)做各種運(yùn)算然后返回新的類型。對(duì)索引類型當(dāng)然也可以做運(yùn)算,對(duì)應(yīng)的類型就是映射類型。

映射類型在生成新的索引類型的過程中,還可以加上或去掉 readonly、?的修飾符。內(nèi)置的 Record、Required、Partial、ReadOnly 都是映射類型。

如果想對(duì)索引類型做進(jìn)一步的過濾和轉(zhuǎn)換,就需要用到 as 的重映射,它可以對(duì)索引做修改(當(dāng)索引為 never 就代表過濾掉該索引)。

會(huì)用索引類型是只是基礎(chǔ),會(huì)用映射類型和重映射就是進(jìn)階內(nèi)容了,這部分可以寫出很多復(fù)雜的類型邏輯,屬于類型體操的范疇。


網(wǎng)站欄目:TS類型體操:索引類型的映射再映射
標(biāo)題路徑:http://www.5511xx.com/article/dphgjhj.html