1. 簡(jiǎn)介

映射就是將一種類型按照映射規(guī)則，轉(zhuǎn)成另一種類型，通常用于對(duì)象類型。

這里類型B通過(guò)A采用屬性名索引的寫法，完成了類型B的定義

type A = {
  foo: number;
  bar: number;
};

type B = {
  [prop in keyof A]: string;
};

這里復(fù)制了一個(gè)一樣的類型，類型B原樣復(fù)制了類型A

type A = {
  foo: number;
  bar: string;
};

type B = {
  [prop in keyof A]: A[prop];
};

為了增加代碼復(fù)用性，可以把常用的映射寫成泛型。

這里定義了一個(gè)泛型，可以將其他對(duì)象的所有屬性值都改成 boolean 類型。

type ToBoolean<Type> = {
  [Property in keyof Type]: boolean;
};

不使用聯(lián)合類型，直接使用某種具體類型進(jìn)行屬性名映射，也是可以的。

type MyObj = {
  [p in 'foo']: number;
};

// 等同于
type MyObj = {
  foo: number;
};

上面示例中，p in 'foo'可以看成只有一個(gè)成員的聯(lián)合類型，因此得到了只有這一個(gè)屬性的對(duì)象類型。

通過(guò)映射，可以把某個(gè)對(duì)象的所有屬性改成可選屬性。比如ts 的內(nèi)置工具類型Partial<T>，就是這樣實(shí)現(xiàn)的。

type A = {
  a: string;
  b: number;
};

type B = {
  [Prop in keyof A]?: A[Prop];
};

上面示例中，類型B在類型A的所有屬性名后面添加問(wèn)號(hào)，使得這些屬性都變成了可選屬性。

ts內(nèi)置的工具類型Readonly<T>可以將所有屬性改為只讀屬性，實(shí)現(xiàn)也是通過(guò)映射。

// 將 T 的所有屬性改為只讀屬性
type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};
// 用法如下。
type T = { a: string; b: number };

type ReadonlyT = Readonly<T>;
// {
//   readonly a: string;
//   readonly b: number;
// }

2. 映射修飾符

映射會(huì)原樣復(fù)制原始對(duì)象的可選屬性和只讀屬性，如果想要?jiǎng)h除可選和只讀這兩個(gè)特性，并不太方便，所以為了解決這個(gè)問(wèn)題，ts引入了兩個(gè)修飾符，用來(lái)移除映射時(shí)添加或移除可選屬性或者只讀屬性。

• +修飾符：寫成+?或+readonly，為映射屬性添加?修飾符或readonly修飾符。
• –修飾符：寫成-?或-readonly，為映射屬性移除?修飾符或readonly修飾符。

這里添加、移除了可選屬性，+?或-?要寫在屬性名的后面

// 添加可選屬性
type Optional<Type> = {
  [Prop in keyof Type]+?: Type[Prop];
};

// 移除可選屬性
type Concrete<Type> = {
  [Prop in keyof Type]-?: Type[Prop];
};

這里添加、移除只讀屬性，+readonly和-readonly要寫在屬性名的前面。

// 添加 readonly
type CreateImmutable<Type> = {
  +readonly [Prop in keyof Type]: Type[Prop];
};

// 移除 readonly
type CreateMutable<Type> = {
  -readonly [Prop in keyof Type]: Type[Prop];
};

如果同時(shí)增刪?和readonly這兩個(gè)修飾符，寫成下面這樣。

// 增加
type MyObj<T> = {
  +readonly [P in keyof T]+?: T[P];
};

// 移除
type MyObj<T> = {
  -readonly [P in keyof T]-?: T[P];
}

ts 原生的工具類型Required<T>專門移除可選屬性，就是使用-?修飾符實(shí)現(xiàn)的。

另外，–?修飾符移除了可選屬性以后，該屬性就不能等于undefined了，實(shí)際變成必選屬性了。但是，這個(gè)修飾符不會(huì)移除null類型。

另外，+?修飾符可以簡(jiǎn)寫成?，+readonly修飾符可以簡(jiǎn)寫成readonly。

3. 鍵名重映射

1. 語(yǔ)法

ts4.1引入了鍵名重映射，允許改變鍵名，就是在鍵名映射的后面加上as +新類型字句，新類型字句一般是模板字符串，用來(lái)對(duì)原鍵名的操作。

type A = {
  foo: number;
  bar: number;
};

type B = {
  [p in keyof A as `${p}ID`]: number;
};

// 等同于
type B = {
  fooID: number;
  barID: number;
};

上面示例中，類型B是類型A的映射，但在映射時(shí)把屬性名改掉了，在原始屬性名后面加上了字符串ID。

可以看到，鍵名重映射的語(yǔ)法是在鍵名映射的后面加上as + 新類型子句。這里的“新類型”通常是一個(gè)模板字符串，里面可以對(duì)原始鍵名進(jìn)行各種操作。

2. 屬性過(guò)濾

鍵名重映射可以過(guò)濾某些屬性。

3. 聯(lián)合類型的映射

因?yàn)殒I名重映射可以修改鍵名類型，所以原始鍵名的類型不必是string|number|symbol，任意的聯(lián)合類型都可以用來(lái)進(jìn)行鍵名重映射。

type S = {
  kind: 'square',
  x: number,
  y: number,
};

type C = {
  kind: 'circle',
  radius: number,
};

type MyEvents<Events extends { kind: string }> = {
  [E in Events as E['kind']]: (event: E) => void;
}

type Config = MyEvents<S|C>;
// 等同于
type Config = {
  square: (event:S) => void;
  circle: (event:C) => void;
}

上面示例中，原始鍵名的映射是E in Events，這里的Events是兩個(gè)對(duì)象組成的聯(lián)合類型S|C。所以，E是一個(gè)對(duì)象，然后再通過(guò)鍵名重映射，得到字符串鍵名E['kind']。

到此這篇關(guān)于TypeScript中類型映射的使用的文章就介紹到這了,更多相關(guān)TypeScript 類型映射內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論