TypeScript——高級類型(5)

映射類型

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

interface PersonPartial {

? ? name?: string;

? ? age?: number;

}

或者我們想要一個只讀版本:

interface PersonReadonly {

? ? readonly name: string;

? ? readonly age: number;

}

這在JavaScript里經(jīng)常出現(xiàn),TypeScript提供了從舊類型中創(chuàng)建新類型的一種方式 — 映射類型。 在映射類型里,新類型以相同的形式去轉(zhuǎn)換舊類型里每個屬性。 例如,你可以令每個屬性成為 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。 具有三個部分:

類型變量 K,它會依次綁定到每個屬性。

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

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

在個簡單的例子里, Keys是硬編碼的的屬性名列表并且屬性類型永遠是 boolean,因此這個映射類型等同于:

type Flags = {

? ? option1: boolean;

? ? option2: boolean;

}

在真正的應(yīng)用里,可能不同于上面的 Readonly或 Partial。 它們會基于一些已存在的類型,且按照一定的方式轉(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]的變體。 這是使用通用映射類型的一個好模版。 因為這類轉(zhuǎn)換是 同態(tài)的,映射只作用于 T的屬性而沒有其它的。 編譯器知道在添加任何新屬性之前可以拷貝所有存在的屬性修飾符。 例如,假設(shè) Person.name是只讀的,那么 Partial<Person>.name也將是只讀的且為可選的。

下面是另一個例子, 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一同被包含進了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不是。 因為 Record并不需要輸入類型來拷貝屬性,所以它不屬于同態(tài):

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

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

由映射類型進行推斷

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

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);

注意這個拆包推斷只適用于同態(tài)的映射類型。 如果映射類型不是同態(tài)的,那么需要給拆包函數(shù)一個明確的類型參數(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ù)類型的實例類型。

示例

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類型的一種實現(xiàn)。我們使用Exclude這個名字是為了避免破壞已經(jīng)定義了Diff的代碼,并且我們感覺這個名字能更好地表達類型的語義。我們沒有增加Omit<T, K>類型,因為它可以很容易的用Pick<T, Exclude<keyof T, K>>來表示。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容