TypeScript——高級(jí)類型(5)

映射類型

一個(gè)常見的任務(wù)是將一個(gè)已知的類型每個(gè)屬性都變?yōu)榭蛇x的:

interface PersonPartial {

? ? name?: string;

? ? age?: number;

}

或者我們想要一個(gè)只讀版本:

interface PersonReadonly {

? ? readonly name: string;

? ? readonly age: number;

}

這在JavaScript里經(jīng)常出現(xiàn)焊傅,TypeScript提供了從舊類型中創(chuàng)建新類型的一種方式 — 映射類型武福。 在映射類型里,新類型以相同的形式去轉(zhuǎn)換舊類型里每個(gè)屬性遥缕。 例如醉冤,你可以令每個(gè)屬性成為 readonly類型或可選的秩霍。 下面是一些例子:

type Readonly<T> = {

? ? readonly [P in keyof T]: T[P];

}

type Partial<T> = {

? ? [P in keyof T]?: T[P];

}

像下面這樣使用:

type PersonPartial = Partial<Person>;

type ReadonlyPerson = Readonly<Person>;

下面來看看最簡單的映射類型和它的組成部分:

type Keys = 'option1' | 'option2';

type Flags = { [K in Keys]: boolean };

它的語法與索引簽名的語法類型,內(nèi)部使用了 for .. in蚁阳。 具有三個(gè)部分:

類型變量 K铃绒,它會(huì)依次綁定到每個(gè)屬性。

字符串字面量聯(lián)合的 Keys螺捐,它包含了要迭代的屬性名的集合颠悬。

屬性的結(jié)果類型。

在個(gè)簡單的例子里定血, Keys是硬編碼的的屬性名列表并且屬性類型永遠(yuǎn)是 boolean赔癌,因此這個(gè)映射類型等同于:

type Flags = {

? ? option1: boolean;

? ? option2: boolean;

}

在真正的應(yīng)用里,可能不同于上面的 Readonly或 Partial糠悼。 它們會(huì)基于一些已存在的類型届榄,且按照一定的方式轉(zhuǎn)換字段。 這就是 keyof和索引訪問類型要做的事情:

type NullablePerson = { [P in keyof Person]: Person[P] | null }

type PartialPerson = { [P in keyof Person]?: Person[P] }

但它更有用的地方是可以有一些通用版本倔喂。

type Nullable<T> = { [P in keyof T]: T[P] | null }

type Partial<T> = { [P in keyof T]?: T[P] }

在這些例子里铝条,屬性列表是 keyof T且結(jié)果類型是 T[P]的變體。 這是使用通用映射類型的一個(gè)好模版席噩。 因?yàn)檫@類轉(zhuǎn)換是 同態(tài)的班缰,映射只作用于 T的屬性而沒有其它的。 編譯器知道在添加任何新屬性之前可以拷貝所有存在的屬性修飾符悼枢。 例如埠忘,假設(shè) Person.name是只讀的,那么 Partial<Person>.name也將是只讀的且為可選的馒索。

下面是另一個(gè)例子莹妒, T[P]被包裝在 Proxy<T>類里:

type Proxy<T> = {

? ? get(): T;

? ? set(value: T): void;

}

type Proxify<T> = {

? ? [P in keyof T]: Proxy<T[P]>;

}

function proxify<T>(o: T): Proxify<T> {

? // ... wrap proxies ...

}

let proxyProps = proxify(props);

注意 Readonly<T>和 Partial<T>用處不小,因此它們與 Pick和 Record一同被包含進(jìn)了TypeScript的標(biāo)準(zhǔn)庫里:

type Pick<T, K extends keyof T> = {

? ? [P in K]: T[P];

}

type Record<K extends string, T> = {

? ? [P in K]: T;

}

Readonly绰上, Partial和 Pick是同態(tài)的旨怠,但 Record不是。 因?yàn)?Record并不需要輸入類型來拷貝屬性蜈块,所以它不屬于同態(tài):

type ThreeStringProps = Record<'prop1' | 'prop2' | 'prop3', string>

非同態(tài)類型本質(zhì)上會(huì)創(chuàng)建新的屬性鉴腻,因此它們不會(huì)從它處拷貝屬性修飾符迷扇。

由映射類型進(jìn)行推斷

現(xiàn)在你了解了如何包裝一個(gè)類型的屬性,那么接下來就是如何拆包爽哎。 其實(shí)這也非常容易:

function unproxify<T>(t: Proxify<T>): T {

? ? let result = {} as T;

? ? for (const k in t) {

? ? ? ? result[k] = t[k].get();

? ? }

? ? return result;

}

let originalProps = unproxify(proxyProps);

注意這個(gè)拆包推斷只適用于同態(tài)的映射類型蜓席。 如果映射類型不是同態(tài)的,那么需要給拆包函數(shù)一個(gè)明確的類型參數(shù)课锌。

預(yù)定義的有條件類型

TypeScript 2.8在lib.d.ts里增加了一些預(yù)定義的有條件類型:

Exclude<T, U> -- 從T中剔除可以賦值給U的類型厨内。

Extract<T, U> -- 提取T中可以賦值給U的類型。

NonNullable<T> -- 從T中剔除null和undefined产镐。

ReturnType<T> -- 獲取函數(shù)返回值類型隘庄。

InstanceType<T> -- 獲取構(gòu)造函數(shù)類型的實(shí)例類型踢步。

示例

type T00 = Exclude<"a" | "b" | "c" | "d", "a" | "c" | "f">;? // "b" | "d"

type T01 = Extract<"a" | "b" | "c" | "d", "a" | "c" | "f">;? // "a" | "c"

type T02 = Exclude<string | number | (() => void), Function>;? // string | number

type T03 = Extract<string | number | (() => void), Function>;? // () => void

type T04 = NonNullable<string | number | undefined>;? // string | number

type T05 = NonNullable<(() => string) | string[] | null | undefined>;? // (() => string) | string[]

function f1(s: string) {

? ? return { a: 1, b: s };

}

class C {

? ? x = 0;

? ? y = 0;

}

type T10 = ReturnType<() => string>;? // string

type T11 = ReturnType<(s: string) => void>;? // void

type T12 = ReturnType<(<T>() => T)>;? // {}

type T13 = ReturnType<(<T extends U, U extends number[]>() => T)>;? // number[]

type T14 = ReturnType<typeof f1>;? // { a: number, b: string }

type T15 = ReturnType<any>;? // any

type T16 = ReturnType<never>;? // any

type T17 = ReturnType<string>;? // Error

type T18 = ReturnType<Function>;? // Error

type T20 = InstanceType<typeof C>;? // C

type T21 = InstanceType<any>;? // any

type T22 = InstanceType<never>;? // any

type T23 = InstanceType<string>;? // Error

type T24 = InstanceType<Function>;? // Error

注意:Exclude類型是建議的Diff類型的一種實(shí)現(xiàn)癣亚。我們使用Exclude這個(gè)名字是為了避免破壞已經(jīng)定義了Diff的代碼,并且我們感覺這個(gè)名字能更好地表達(dá)類型的語義获印。我們沒有增加Omit<T, K>類型述雾,因?yàn)樗梢院苋菀椎挠肞ick<T, Exclude<keyof T, K>>來表示。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末兼丰,一起剝皮案震驚了整個(gè)濱河市玻孟,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌鳍征,老刑警劉巖黍翎,帶你破解...
    沈念sama閱讀 210,978評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異艳丛,居然都是意外死亡匣掸,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,954評(píng)論 2 384
  • 文/潘曉璐 我一進(jìn)店門氮双,熙熙樓的掌柜王于貴愁眉苦臉地迎上來碰酝,“玉大人,你說我怎么就攤上這事戴差∷桶郑” “怎么了?”我有些...
    開封第一講書人閱讀 156,623評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵暖释,是天一觀的道長袭厂。 經(jīng)常有香客問我,道長球匕,這世上最難降的妖魔是什么纹磺? 我笑而不...
    開封第一講書人閱讀 56,324評(píng)論 1 282
  • 正文 為了忘掉前任,我火速辦了婚禮谐丢,結(jié)果婚禮上爽航,老公的妹妹穿的比我還像新娘蚓让。我一直安慰自己,他們只是感情好讥珍,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,390評(píng)論 5 384
  • 文/花漫 我一把揭開白布历极。 她就那樣靜靜地躺著,像睡著了一般衷佃。 火紅的嫁衣襯著肌膚如雪趟卸。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,741評(píng)論 1 289
  • 那天氏义,我揣著相機(jī)與錄音锄列,去河邊找鬼。 笑死惯悠,一個(gè)胖子當(dāng)著我的面吹牛邻邮,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播克婶,決...
    沈念sama閱讀 38,892評(píng)論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼筒严,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了情萤?” 一聲冷哼從身側(cè)響起鸭蛙,我...
    開封第一講書人閱讀 37,655評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎筋岛,沒想到半個(gè)月后娶视,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,104評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡睁宰,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,451評(píng)論 2 325
  • 正文 我和宋清朗相戀三年肪获,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片勋陪。...
    茶點(diǎn)故事閱讀 38,569評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡贪磺,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出诅愚,到底是詐尸還是另有隱情寒锚,我是刑警寧澤,帶...
    沈念sama閱讀 34,254評(píng)論 4 328
  • 正文 年R本政府宣布违孝,位于F島的核電站刹前,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏雌桑。R本人自食惡果不足惜喇喉,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,834評(píng)論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望校坑。 院中可真熱鬧拣技,春花似錦千诬、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,725評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至莫辨,卻和暖如春傲茄,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背沮榜。 一陣腳步聲響...
    開封第一講書人閱讀 31,950評(píng)論 1 264
  • 我被黑心中介騙來泰國打工盘榨, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人蟆融。 一個(gè)月前我還...
    沈念sama閱讀 46,260評(píng)論 2 360
  • 正文 我出身青樓草巡,卻偏偏與公主長得像,于是被迫代替她去往敵國和親振愿。 傳聞我的和親對(duì)象是個(gè)殘疾皇子捷犹,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,446評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容