你需要知道的TypeScript高級(jí)類(lèi)型

大家好，我是 CUGGZ。

在開(kāi)發(fā)過(guò)程中，為了應(yīng)對(duì)多變的復(fù)雜場(chǎng)景，我們需要了解一下 TypeScript 的高級(jí)類(lèi)型。所謂高級(jí)類(lèi)型，是 TypeScript 為了保證語(yǔ)言的靈活性，所使用的一些語(yǔ)言特性。這些特性有助于我們應(yīng)對(duì)復(fù)雜多變的開(kāi)發(fā)場(chǎng)景。

本文大綱如下：

字面量類(lèi)型
聯(lián)合類(lèi)型
交叉類(lèi)型
索引類(lèi)型
條件類(lèi)型
類(lèi)型推斷
類(lèi)型保護(hù)
類(lèi)型斷言
1. 字面量類(lèi)型
在 TypeScript 中，字面量不僅可以表示值，還可以表示類(lèi)型，即字面量類(lèi)型。TypeScript 支持以下字面量類(lèi)型：

字符串字面量類(lèi)型；
數(shù)字字面量類(lèi)型；
布爾字面量類(lèi)型；
模板字面量類(lèi)型。
（1）字符串字面量類(lèi)型
字符串字面量類(lèi)型其實(shí)就是字符串常量，與字符串類(lèi)型不同的是它是具體的值：

type Name = "TS";
const name1: Name = "test"; // ? 不能將類(lèi)型“"test"”分配給類(lèi)型“"TS"”。ts(2322)
const name2: Name = "TS";
實(shí)際上，定義單個(gè)字面量類(lèi)型在實(shí)際應(yīng)用中并沒(méi)有太大的用處。它的應(yīng)用場(chǎng)景就是將多個(gè)字面量類(lèi)型組合成一個(gè)聯(lián)合類(lèi)型，用來(lái)描述擁有明確成員的實(shí)用的集合：

type Direction = "north" | "east" | "south" | "west";

function getDirectionFirstLetter(direction: Direction) {
  return direction.substr(0, 1);
}

getDirectionFirstLetter("test"); // ? 類(lèi)型“"test"”的參數(shù)不能賦給類(lèi)型“Direction”的參數(shù)。
getDirectionFirstLetter("east");
這個(gè)例子中使用四個(gè)字符串字面量類(lèi)型組成了一個(gè)聯(lián)合類(lèi)型。這樣在調(diào)用函數(shù)時(shí)，編譯器就會(huì)檢查傳入的參數(shù)是否是指定的字面量類(lèi)型集合中的成員。通過(guò)這種方式，可以將函數(shù)的參數(shù)限定為更具體的類(lèi)型。這不僅提升了代碼的可讀性，還保證了函數(shù)的參數(shù)類(lèi)型。

除此之外，使用字面量類(lèi)型還可以為我們提供智能的代碼提示：



（2）數(shù)字字面量類(lèi)型
數(shù)字字面量類(lèi)型就是指定類(lèi)型為具體的數(shù)值：

type Age = 18;

interface Info {
  name: string;
  age: Age;
}

const info: Info = {
  name: "TS",
  age: 28 // ? 不能將類(lèi)型“28”分配給類(lèi)型“18”
};
可以將數(shù)字字面量類(lèi)型分配給一個(gè)數(shù)字，但反之是不行的：

let val1: 10|11|12|13|14|15 = 10;
let val2 = 10;

val2 = val1;
val1 = val2; // ? 不能將類(lèi)型“number”分配給類(lèi)型“10 | 11 | 12 | 13 | 14 | 15”。
（3）布爾字面量類(lèi)型
布爾字面量類(lèi)型就是指定類(lèi)型為具體的布爾值（true或false）：

let success: true;
let fail: false;
let value: true | false;

success = true;
success = false;  // ? 不能將類(lèi)型“false”分配給類(lèi)型“true”
由于布爾字面量類(lèi)型只有true或false兩種，所以下面 value 變量的類(lèi)型是一樣的：

let value: true | false;
let value: boolean;
（4）模板字面量類(lèi)型
在 TypeScript 4.1 版本中新增了模板字面量類(lèi)型。什么是模板字面量類(lèi)型呢？它一字符串字面量類(lèi)型為基礎(chǔ)，可以通過(guò)聯(lián)合類(lèi)型擴(kuò)展成多個(gè)字符串。它與 JavaScript 的模板字符串語(yǔ)法相同，但是只能用在類(lèi)型定義中使用。

① 基本語(yǔ)法
當(dāng)使用模板字面量類(lèi)型時(shí)，它會(huì)替換模板中的變量，返回一個(gè)新的字符串字面量。

type attrs = "Phone" | "Name";
type target = `get${attrs}`;

// type target = "getPhone" | "getName";
可以看到，模板字面量類(lèi)型的語(yǔ)法簡(jiǎn)單，并且易讀且功能強(qiáng)大。

假如有一個(gè)CSS內(nèi)邊距規(guī)則的類(lèi)型，定義如下：

type CssPadding = 'padding-left' | 'padding-right' | 'padding-top' | 'padding-bottom';
上面的類(lèi)型是沒(méi)有問(wèn)題的，但是有點(diǎn)冗長(zhǎng)。margin 和 padding 的規(guī)則相同，但是這樣寫(xiě)我們無(wú)法重用任何內(nèi)容，最終就會(huì)得到很多重復(fù)的代碼。

下面來(lái)使用模版字面量類(lèi)型來(lái)解決上面的問(wèn)題：

type Direction = 'left' | 'right' | 'top' | 'bottom';

type CssPadding = `padding-${Direction}`

// type CssPadding = 'padding-left' | 'padding-right' | 'padding-top' | 'padding-bottom'
這樣代碼就變得更加簡(jiǎn)潔。如果想創(chuàng)建margin類(lèi)型，就可以重用Direction類(lèi)型：

type CssMargin = `margin-${Direction}`
如果在 JavaScript 中定義了變量，就可以使用 typeof 運(yùn)算符來(lái)提取它：

const direction = 'left';

type CssPadding = `padding-${typeof direction}`;

// type CssPadding = "padding-left"
② 變量限制
模版字面量中的變量可以是任意的類(lèi)型嗎？可以使用對(duì)象或自定義類(lèi)型嗎？來(lái)看下面的例子：

type CustomObject = {
  foo: string
}

type target = `get${CustomObject}`
// ? 不能將類(lèi)型“CustomObject”分配給類(lèi)型“string | number | bigint | boolean | null | undefined”。

type complexUnion = string | number | bigint | boolean | null | undefined;

type target2 = `get${complexUnion}`  // ?
可以看到，當(dāng)在模板字面量類(lèi)型中使用對(duì)象類(lèi)型時(shí)，就報(bào)錯(cuò)了，因?yàn)榫幾g器不知道如何將它序列化為字符串。實(shí)際上，模板字面量類(lèi)型中的變量只允許是string、number、bigint、boolean、null、undefined或這些類(lèi)型的聯(lián)合類(lèi)型。

③ 實(shí)用程序
Typescript 提供了一組實(shí)用程序來(lái)幫助處理字符串。它們不是模板字面量類(lèi)型獨(dú)有的，但與它們結(jié)合使用時(shí)很方便。完整列表如下：

Uppercase<StringType>：將類(lèi)型轉(zhuǎn)換為大寫(xiě)；
Lowercase<StringType>：將類(lèi)型轉(zhuǎn)換為小寫(xiě)；
Capitalize<StringType>：將類(lèi)型第一個(gè)字母大寫(xiě)；
Uncapitalize<StringType>：將類(lèi)型第一個(gè)字母小寫(xiě)。
這些實(shí)用程序只接受一個(gè)字符串字面量類(lèi)型作為參數(shù)，否則就會(huì)在編譯時(shí)拋出錯(cuò)誤：

type nameProperty = Uncapitalize<'Name'>;
// type nameProperty = 'name';

type upercaseDigit = Uppercase<10>;
// ? 類(lèi)型“number”不滿足約束“string”。

type property = 'phone';
type UppercaseProperty = Uppercase<property>;
// type UppercaseProperty = 'Property';
下面來(lái)看一個(gè)更復(fù)雜的場(chǎng)景，將字符串字面量類(lèi)型與這些實(shí)用程序結(jié)合使用。將兩種類(lèi)型進(jìn)行組合，并將第二種類(lèi)型的首字母大小，這樣組合之后的類(lèi)型符合駝峰命名法：

type actions = 'add' | 'remove';

type property = 'name' | 'phone';

type result = `${actions}${Capitalize<property>}`;
// type result = addName | addPhone | removeName | removePhone
④ 類(lèi)型推斷
在上面的例子中，我們使用使用模版字面量類(lèi)型將現(xiàn)有的類(lèi)型組合成新類(lèi)型。下面來(lái)看看如何使用模板字面量類(lèi)型從組合的類(lèi)型中提取類(lèi)型。這里就需要用到infer關(guān)鍵字，它允許我們從條件類(lèi)型中的另一個(gè)類(lèi)型推斷出一個(gè)類(lèi)型。

下面來(lái)嘗試提取字符串字面量 marginRight 的根節(jié)點(diǎn)：

type Direction = 'left' | 'right' | 'top' | 'bottom';

type InferRoot<T> = T extends `${infer K}${Capitalize<Direction>}` ? K : T;

type Result1 = InferRoot<'marginRight'>;
// type Result1 = 'margin';

type Result2 = InferRoot<'paddingLeft'>;
// type Result2 = 'padding';
可以看到， 模版字面量還是很強(qiáng)大的，不僅可以創(chuàng)建類(lèi)型，還可以解構(gòu)它們。

⑤ 作為判別式
在TypeScript 4.5 版本中，支持了將模板字面量串類(lèi)型作為判別式，用于類(lèi)型推導(dǎo)。來(lái)看下面的例子：

interface Message {
    type: string;
    url: string;
}

interface SuccessMessage extends Message {
    type: `${string}Success`;
    body: string;
}

interface ErrorMessage extends Message {
    type: `${string}Error`;
    message: string;
}

function handler(r: SuccessMessage | ErrorMessage) {
    if (r.type === "HttpSuccess") {
        let token = r.body;
    }
}
在這個(gè)例子中，handler 函數(shù)中的 r 的類(lèi)型就被推斷為 SuccessMessage。因?yàn)楦鶕?jù) SuccessMessage 和 ErrorMessage 類(lèi)型中的type字段的模板字面量類(lèi)型推斷出 HttpSucces 是根據(jù)SuccessMessage中的type創(chuàng)建的。

2. 聯(lián)合類(lèi)型
（1）基本使用
聯(lián)合類(lèi)型是一種互斥的類(lèi)型，該類(lèi)型同時(shí)表示所有可能的類(lèi)型。聯(lián)合類(lèi)型可以理解為多個(gè)類(lèi)型的并集。 聯(lián)合類(lèi)型用來(lái)表示變量、參數(shù)的類(lèi)型不是某個(gè)單一的類(lèi)型，而可能是多種不同的類(lèi)型的組合，它通過(guò) | 來(lái)分隔不同的類(lèi)型：

type Union = "A" | "B" | "C";
在編寫(xiě)一個(gè)函數(shù)時(shí)，該函數(shù)的期望參數(shù)是數(shù)字或者字符串，并根據(jù)傳遞的參數(shù)類(lèi)型來(lái)執(zhí)行不同的邏輯。這時(shí)就用到了聯(lián)合類(lèi)型：

function direction(param: string | number) {
  if (typeof param === "string") {
    ...
  }
  if (typeof param === "number") {
    ...
  }
  ...
}
這樣在調(diào)用 direction 函數(shù)時(shí)，就可以傳入string或number類(lèi)型的參數(shù)。當(dāng)聯(lián)合類(lèi)型比較長(zhǎng)或者想要復(fù)用這個(gè)聯(lián)合類(lèi)型的時(shí)候，就可以使用類(lèi)型別名來(lái)定義聯(lián)合類(lèi)型：

type Params = string | number | boolean;
再來(lái)看一個(gè)字符串字面量聯(lián)合類(lèi)型的例子，setStatus 函數(shù)只能接受某些特定的字符串值，就可以將這些字符串字面量組合成一個(gè)聯(lián)合類(lèi)型：

type Status = 'not_started' | 'progress' | 'completed' | 'failed';

const setStatus = (status: Status) => {
  db.object.setStatus(status);
};

setStatus('progress');
setStatus('offline'); // ? 類(lèi)型“"offline"”的參數(shù)不能賦給類(lèi)型“Status”的參數(shù)。
在調(diào)用函數(shù)時(shí)，如果傳入的參數(shù)不是聯(lián)合類(lèi)型中的值，就會(huì)報(bào)錯(cuò)。

（2）限制
聯(lián)合類(lèi)型僅在編譯時(shí)是可用的，這意味著我們不能遍歷這些值。進(jìn)行如下嘗試：

type Status = 'not_started' | 'progress' | 'completed' | 'failed';

console.log(Object.values(Status)); // ? “Status”僅表示類(lèi)型，但在此處卻作為值使用。
這時(shí)就會(huì)拋出一個(gè)錯(cuò)誤，告訴我們不能將 Status 類(lèi)型當(dāng)做值來(lái)使用。

如果想要遍歷這些值，可以使用枚舉來(lái)實(shí)現(xiàn)：

enum Status {
  'not_started',
  'progress',
  'completed',
  'failed'
}

console.log(Object.values(Status));
（3）可辨識(shí)聯(lián)合類(lèi)型
在使用聯(lián)合類(lèi)型時(shí)，如何來(lái)區(qū)分聯(lián)合類(lèi)型中的類(lèi)型呢？類(lèi)型保護(hù)是一種條件檢查，可以幫助我們區(qū)分類(lèi)型。在這種情況下，類(lèi)型保護(hù)可以讓我們準(zhǔn)確地確定聯(lián)合中的類(lèi)型（下文會(huì)詳細(xì)介紹類(lèi)型保護(hù)）。

有很多方式可以做到這一點(diǎn)，這很大程度上取決于聯(lián)合類(lèi)型中包含哪些類(lèi)型。有一條捷徑可以使聯(lián)合類(lèi)型中的類(lèi)型之間的區(qū)分變得容易，那就是可辨識(shí)聯(lián)合類(lèi)型?？杀孀R(shí)聯(lián)合類(lèi)型是聯(lián)合類(lèi)型的一種特殊情況，它允許我們輕松的區(qū)分其中的類(lèi)型。

這是通過(guò)向具有唯一值的每個(gè)類(lèi)型中添加一個(gè)字段來(lái)實(shí)現(xiàn)的，該字段用于使用相等類(lèi)型保護(hù)來(lái)區(qū)分類(lèi)型。例如，有一個(gè)表示所有可能的形狀的聯(lián)合類(lèi)型，根據(jù)傳入的不同類(lèi)型的形狀來(lái)計(jì)算該形狀的面積，代碼如下：

type Square = {
  kind: "square";
  size: number;
}

type Rectangle = {
  kind: "rectangle";
  height: number;
  width: number;
}

type Circle = {
  kind: "circle";
  radius: number;
}

type Shape = Square | Rectangle | Circle;

function getArea(s: Shape) {
  switch (s.kind) {
    case "square":
      return s.size * s.size;
    case "rectangle":
      return s.height * s.width;
    case "circle":
      return Math.PI * s.radius ** 2;
  }
}
在這個(gè)例子中，Shape 就是一個(gè)可辨識(shí)聯(lián)合類(lèi)型，它是三個(gè)類(lèi)型的聯(lián)合，而這三個(gè)類(lèi)型都有一個(gè) kind 屬性，且每個(gè)類(lèi)型的 kind 屬性值都不相同，能夠起到標(biāo)識(shí)作用。函數(shù)內(nèi)應(yīng)該包含聯(lián)合類(lèi)型中每一個(gè)接口的 case，以保證每個(gè)**case**都能被處理。

如果函數(shù)內(nèi)沒(méi)有包含聯(lián)合類(lèi)型中每一個(gè)類(lèi)型的 case，在編寫(xiě)代碼時(shí)希望編譯器應(yīng)該給出代碼提示，可以使用以下兩種完整性檢查的方法。

① strictNullChecks
對(duì)于上面的例子，先來(lái)新增一個(gè)類(lèi)型，整體代碼如下：

type Square = {
  kind: "square";
  size: number;
}

type Rectangle = {
  kind: "rectangle";
  height: number;
  width: number;
}

type Circle = {
  kind: "circle";
  radius: number;
}

type Triangle = {
  kind: "triangle";
  bottom: number;
  height: number;
}

type Shape = Square | Rectangle | Circle | Triangle;

function getArea(s: Shape) {
  switch (s.kind) {
    case "square":
      return s.size * s.size;
    case "rectangle":
      return s.height * s.width;
    case "circle":
      return Math.PI * s.radius ** 2;
  }
}
這時(shí)，Shape 聯(lián)合類(lèi)型中有四種類(lèi)型，但函數(shù)的 switch 里只包含三個(gè) case，這個(gè)時(shí)候編譯器并沒(méi)有提示任何錯(cuò)誤，因?yàn)楫?dāng)傳入函數(shù)的是類(lèi)型是 Triangle 時(shí)，沒(méi)有任何一個(gè) case 符合，則不會(huì)執(zhí)行任何 return 語(yǔ)句，那么函數(shù)是默認(rèn)返回 undefined。所以可以利用這個(gè)特點(diǎn)，結(jié)合 strictNullChecks 編譯選項(xiàng)，可以在tsconfig.json配置文件中開(kāi)啟 strictNullChecks：

{
  "compilerOptions": {
    "strictNullChecks": true,
  }
}
讓函數(shù)的返回值類(lèi)型為 number，那么當(dāng)返回 undefined 時(shí)就會(huì)報(bào)錯(cuò)：

function getArea(s: Shape): number {
    case "square":
      return s.size * s.size;
    case "rectangle":
      return s.height * s.width;
    case "circle":
      return Math.PI * s.radius ** 2;
  }
}
上面的number處就會(huì)報(bào)錯(cuò)：








② never
當(dāng)函數(shù)返回一個(gè)錯(cuò)誤或者不可能有返回值的時(shí)候，返回值類(lèi)型為 never。所以可以給 switch 添加一個(gè) default 流程，當(dāng)前面的 case 都不符合的時(shí)候，會(huì)執(zhí)行 default 中的邏輯：

function assertNever(value: never): never {
  throw new Error("Unexpected object: " + value);
}

function getArea(s: Shape) {
  switch (s.kind) {
    case "square":
      return s.size * s.size;
    case "rectangle":
      return s.height * s.width;
    case "circle":
      return Math.PI * s.radius ** 2;
    default:
      return assertNever(s); // error 類(lèi)型“Triangle”的參數(shù)不能賦給類(lèi)型“never”的參數(shù)
  }
}
采用這種方式，需要定義一個(gè)額外的 asserNever 函數(shù)，但是這種方式不僅能夠在編譯階段提示遺漏了判斷條件，而且在運(yùn)行時(shí)也會(huì)報(bào)錯(cuò)。

3. 交叉類(lèi)型
（1）基本實(shí)用
交叉類(lèi)型是將多個(gè)類(lèi)型合并為一個(gè)類(lèi)型。這讓我們可以把現(xiàn)有的多種類(lèi)型疊加到成為一種類(lèi)型，合并后的類(lèi)型將擁有所有成員類(lèi)型的特性。交叉類(lèi)型可以理解為多個(gè)類(lèi)型的交集。 可以使用以下語(yǔ)法來(lái)創(chuàng)建交叉類(lèi)型，每種類(lèi)型之間使用 & 來(lái)分隔：

type Types = type1 & type2 & .. & .. & typeN;
如果我們僅僅把原始類(lèi)型、字面量類(lèi)型、函數(shù)類(lèi)型等原子類(lèi)型合并成交叉類(lèi)型，是沒(méi)有任何意義的，因?yàn)椴粫?huì)有變量同時(shí)滿足這些類(lèi)型，那這個(gè)類(lèi)型實(shí)際上就等于never類(lèi)型。

（2）使用場(chǎng)景
上面說(shuō)了，一般情況下使用交叉類(lèi)型是沒(méi)有意義的，那什么時(shí)候該使用交叉類(lèi)型呢？下面就來(lái)看看交叉類(lèi)型的使用場(chǎng)景。

① 合并接口類(lèi)型
交叉類(lèi)型的一個(gè)常見(jiàn)的使用場(chǎng)景就是將多個(gè)接口合并成為一個(gè)：

type Person = {
 name: string;
  age: number;
} & {
 height: number;
  weight: number;
} & {
 id: number;
}

const person: Person = {
 name: "zhangsan",
  age: 18,
  height: 180,
  weight: 60,
  id: 123456
}
這里就通過(guò)交叉類(lèi)型使 Person 同時(shí)擁有了三個(gè)接口中的五個(gè)屬性。那如果兩個(gè)接口中的同一個(gè)屬性定義了不同的類(lèi)型會(huì)發(fā)生了什么情況呢？

type Person = {
 name: string;
  age: number;
} & {
  age: string;
 height: number;
  weight: number;
}
兩個(gè)接口中都擁有age屬性，并且類(lèi)型分別是number和string，那么在合并后，age的類(lèi)型就是string & number，也就是 never 類(lèi)型：

const person: Person = {
 name: "zhangsan",
  age: 18,   // ? 不能將類(lèi)型“number”分配給類(lèi)型“never”。
  height: 180,
  weight: 60,
}
如果同名屬性的類(lèi)型兼容，比如一個(gè)是 number，另一個(gè)是 number 的子類(lèi)型——數(shù)字字面量類(lèi)型，合并后 age 屬性的類(lèi)型就是兩者中的子類(lèi)型：

type Person = {
 name: string;
  age: number;
} & {
  age: 18;
 height: number;
  weight: number;
}

const person: Person = {
 name: "zhangsan",
  age: 20,  // ? 不能將類(lèi)型“20”分配給類(lèi)型“18”。
  height: 180,
  weight: 60,
}
第二個(gè)接口中的age是一個(gè)數(shù)字字面量類(lèi)型，它是number類(lèi)型的子類(lèi)型，所以合并之后的類(lèi)型為字面量類(lèi)型18。

② 合并聯(lián)合類(lèi)型
交叉類(lèi)型另外一個(gè)常見(jiàn)的使用場(chǎng)景就是合并聯(lián)合類(lèi)型。可以將多個(gè)聯(lián)合類(lèi)型合并為一個(gè)交叉類(lèi)型，這個(gè)交叉類(lèi)型需要同時(shí)滿足不同的聯(lián)合類(lèi)型限制，也就是提取了所有聯(lián)合類(lèi)型的相同類(lèi)型成員：

type A = "blue" | "red" | 999;
type B = 999 | 666;
type C = A & B; // type C = 999;

const c: C = 999;
如果多個(gè)聯(lián)合類(lèi)型中沒(méi)有相同的類(lèi)型成員，那么交叉出來(lái)的類(lèi)型就是never類(lèi)型：

type A = "blue" | "red";
type B = 999 | 666;
type C = A & B;

const c: C = 999; // ? 不能將類(lèi)型“number”分配給類(lèi)型“never”。
4. 索引類(lèi)型
在介紹索引類(lèi)型之前，先來(lái)了解兩個(gè)類(lèi)型操作符：索引類(lèi)型查詢(xún)操作符和索引訪問(wèn)操作符。

（1）索引類(lèi)型查詢(xún)操作符
使用 keyof 操作符可以返回一個(gè)由這個(gè)類(lèi)型的所有屬性名組成的聯(lián)合類(lèi)型：

type UserRole = 'admin' | 'moderator' | 'author';

type User = {
  id: number;
  name: string;
  email: string;
  role: UserRole;
}

type UserKeysType = keyof User; // 'id' | 'name' | 'email' | 'role';
（2）索引訪問(wèn)操作符
索引訪問(wèn)操作符就是[]，其實(shí)和訪問(wèn)對(duì)象的某個(gè)屬性值是一樣的語(yǔ)法，但是在 TS 中它可以用來(lái)訪問(wèn)某個(gè)屬性的類(lèi)型：

type User = {
  id: number;
  name: string;
  address: {
    street: string;
    city: string;
    country: string;
  };
}

type Params = {
  id: User['id'],
  address: User['address']
}
這里我們沒(méi)有使用number來(lái)描述id屬性，而是使用 User['id'] 引用User中的id屬性的類(lèi)型，這種類(lèi)型成為索引類(lèi)型，它們看起來(lái)與訪問(wèn)對(duì)象的屬性相同，但訪問(wèn)的是類(lèi)型。

當(dāng)然，也可以訪問(wèn)嵌套屬性的類(lèi)型：

type City = User['address']['city']; // string
可以通過(guò)聯(lián)合類(lèi)型來(lái)一次獲取多個(gè)屬性的類(lèi)型：

type IdOrName = User['id' | 'name']; // string | number
（3）應(yīng)用
我們可以使用以下方式來(lái)獲取給定對(duì)象中的任何屬性：

function getProperty<T, K extends keyof T>(obj: T, key: K) {
  return obj[key];
}
TypeScript 會(huì)推斷此函數(shù)的返回類(lèi)型為 T[K]，當(dāng)調(diào)用  getProperty 函數(shù)時(shí)，TypeScript 將推斷我們將要讀取的屬性的實(shí)際類(lèi)型：

const user: User = {
  id: 15,
  name: 'John',
  email: 'john@smith.com',
  role: 'admin'
};

getProperty(user, 'name'); // string
getProperty(user, 'id');   // number
name屬性被推斷為string類(lèi)型，age屬性被推斷為number類(lèi)型。當(dāng)訪問(wèn)User中不存在的屬性時(shí)，就會(huì)報(bào)錯(cuò)：

getProperty(user, 'property'); // ? 類(lèi)型“"property"”的參數(shù)不能賦給類(lèi)型“keyof User”的參數(shù)。
5. 條件類(lèi)型
（1）基本概念
條件類(lèi)型根據(jù)條件來(lái)選擇兩種可能的類(lèi)型之一，就像 JavaScript 中的三元運(yùn)算符一樣。其語(yǔ)法如下所示：

T extends U ? X : Y
上述類(lèi)型就意味著當(dāng) T 可分配給（或繼承自）U 時(shí)，類(lèi)型為 X，否則類(lèi)型為 Y。

看一個(gè)簡(jiǎn)單的例子，一個(gè)值可以是用戶(hù)的出生日期或年齡。如果是出生日期，那么這個(gè)值的類(lèi)型就是 number；如果是年齡，那這個(gè)值的類(lèi)型就是 string。下面定義了三個(gè)類(lèi)型：

type Dob = string;
type Age = number;
type UserAgeInformation<T> = T extends number ? number : string;
其中 T 是 UserAgeInformation 的泛型參數(shù)，可以在這里傳遞任何類(lèi)型。如果 T 擴(kuò)展了 number，那么類(lèi)型就是 number，否則就是 string。如果希望 UserAgeInformation 是 number，就可以將 Age 傳遞給 T，如果希望是一個(gè) string，就可以將 Dob 傳遞給 T：

type Dob = string;
type Age = number;
type UserAgeInformation<T> = T extends number ? number : string;

let userAge:UserAgeInformation<Age> = 100;
let userDob:UserAgeInformation<Dob> = '25/04/1998';
（2）創(chuàng)建自定義條件類(lèi)型
單獨(dú)使用條件類(lèi)型可能用處不是很大，但是結(jié)合泛型使用時(shí)就非常有用。一個(gè)常見(jiàn)的用例就是使用帶有 never 類(lèi)型的條件類(lèi)型來(lái)修剪類(lèi)型中的值。

type NullableString = string | null;

let itemName: NullableString;
itemName = null;
itemName = "Milk";

console.log(itemName);
其中 NullableString 可以是 string 或 null 類(lèi)型，它用于 itemName 變量。定義一個(gè)名為 NoNull 的類(lèi)型別名：

type NoNull<T>
我們想從類(lèi)型中剔除 null，需要通過(guò)條件來(lái)檢查類(lèi)型是否包含 null：

type NoNull<T> = T extends null;
當(dāng)這個(gè)條件為 true 時(shí)，不想使用該類(lèi)型，返回 never 類(lèi)型：

type NoNull<T> = T extends null ? never
當(dāng)這個(gè)條件為 false 時(shí)，說(shuō)明類(lèi)型中不包含 null，可以直接返回 T：

type NoNull<T> = T extends null ? never : T;
將 itemName 變量的類(lèi)型更改為 NoNull：

let itemName: NoNull<NullableString>;
TypeScript 有一個(gè)類(lèi)似的實(shí)用程序類(lèi)型，稱(chēng)為 NonNullable，其實(shí)現(xiàn)如下：

type NonNullable<T> = T extends null | undefined ? never : T;
NonNullable 和 NoNull 之間的區(qū)別在于 NonNullable 將從類(lèi)型中刪除 undefined 以及 null。

（3）條件類(lèi)型的類(lèi)型推斷
條件類(lèi)型提供了一個(gè)infer關(guān)鍵字用來(lái)推斷類(lèi)型。下面來(lái)定義一個(gè)條件類(lèi)型，如果傳入的類(lèi)型是一個(gè)數(shù)組，則返回?cái)?shù)組元素的類(lèi)型；如果是一個(gè)普通類(lèi)型，則直接返回這個(gè)類(lèi)型。如果不使用  infer 可以這樣寫(xiě)：

type Type<T> = T extends any[] ? T[number] : T;

type test = Type<string[]>; // string
type test2 = Type<string>;  // string
如果傳入 Type 的是一個(gè)數(shù)組類(lèi)型，那么返回的類(lèi)型為T(mén)[number]，即該數(shù)組的元素類(lèi)型，如果不是數(shù)組，則直接返回這個(gè)類(lèi)型。這里通過(guò)索引訪問(wèn)類(lèi)型T[number]來(lái)獲取類(lèi)型，如果使用 infer 關(guān)鍵字則無(wú)需手動(dòng)獲取：

type Type<T> = T extends Array<infer U> ? U : T;

type test = Type<string[]>; // string
type test2 = Type<string>;  // string
這里 infer 能夠推斷出 U 的類(lèi)型，并且供后面使用，可以理解為這里定義了一個(gè)變量 U 來(lái)接收數(shù)組元素的類(lèi)型。

6. 類(lèi)型推斷
（1）基礎(chǔ)類(lèi)型
在變量的定義中如果沒(méi)有明確指定類(lèi)型，編譯器會(huì)自動(dòng)推斷出其類(lèi)型：

let name = "zhangsan";
name = 123; // error 不能將類(lèi)型“123”分配給類(lèi)型“string”
在定義變量 name 時(shí)沒(méi)有指定其類(lèi)型，而是直接給它賦一個(gè)字符串。當(dāng)再次給 name 賦一個(gè)數(shù)值時(shí)，就會(huì)報(bào)錯(cuò)。這里，TypeScript 根據(jù)賦給 name 的值的類(lèi)型，推斷出 name 是 string 類(lèi)型，當(dāng)給 string 類(lèi)型的 name 變量賦其他類(lèi)型值的時(shí)候就會(huì)報(bào)錯(cuò)。這是最基本的類(lèi)型推論，根據(jù)右側(cè)的值推斷左側(cè)變量的類(lèi)型。

（2）多類(lèi)型聯(lián)合
當(dāng)定義一個(gè)數(shù)組或元組這種包含多個(gè)元素的值時(shí)，多個(gè)元素可以有不同的類(lèi)型，這時(shí) TypeScript 會(huì)將多個(gè)類(lèi)型合并起來(lái)，組成一個(gè)聯(lián)合類(lèi)型：

let arr = [1, "a"];
arr = ["b", 2, false]; // error 不能將類(lèi)型“false”分配給類(lèi)型“string | number”
可以看到，此時(shí)的 arr 中的元素被推斷為string | number，也就是元素可以是 string 類(lèi)型也可以是 number 類(lèi)型，除此之外的類(lèi)型是不可以的。

再來(lái)看一個(gè)例子：

let value = Math.random() * 10 > 5 ? 'abc' : 123
value = false // error 不能將類(lèi)型“false”分配給類(lèi)型“string | number”
這里給value賦值為一個(gè)三元表達(dá)式的結(jié)果，Math.random() * 10的值為0-10的隨機(jī)數(shù)。如果這個(gè)隨機(jī)值大于5，則賦給 value的值為字符串a(chǎn)bc，否則為數(shù)值123。所以最后編譯器推斷出的類(lèi)型為聯(lián)合類(lèi)型string | number，當(dāng)給它再賦值false時(shí)就會(huì)報(bào)錯(cuò)。

（3）上下文類(lèi)型
上面的例子都是根據(jù)=右側(cè)值的類(lèi)型，推斷左側(cè)值的類(lèi)型。而上下文類(lèi)型則相反，它是根據(jù)左側(cè)的類(lèi)型推斷右側(cè)的類(lèi)型：

window.onmousedown = function(mouseEvent) {
  console.log(mouseEvent.a); // error 類(lèi)型“MouseEvent”上不存在屬性“a”
};
可以看到，表達(dá)式左側(cè)是 window.onmousedown(鼠標(biāo)按下時(shí)觸發(fā))，因此 TypeScript 會(huì)推斷賦值表達(dá)式右側(cè)函數(shù)的參數(shù)是事件對(duì)象，因?yàn)樽髠?cè)是 mousedown 事件，所以 TypeScript 推斷 mouseEvent 的類(lèi)型是 MouseEvent。在回調(diào)函數(shù)中使用 mouseEvent 時(shí)，可以訪問(wèn)鼠標(biāo)事件對(duì)象的所有屬性和方法，當(dāng)訪問(wèn)不存在屬性時(shí)，就會(huì)報(bào)錯(cuò)。

7. 類(lèi)型保護(hù)
類(lèi)型保護(hù)實(shí)際上是一種錯(cuò)誤提示機(jī)制，類(lèi)型保護(hù)是可執(zhí)行運(yùn)行時(shí)檢查的一種表達(dá)式，用于確保該類(lèi)型在一定的范圍內(nèi)。類(lèi)型保護(hù)的主要思想是嘗試檢測(cè)屬性、方法或原型，以確定如何處理值。

（1）instanceof 類(lèi)型保護(hù)
instanceof是一個(gè)內(nèi)置的類(lèi)型保護(hù)，可用于檢查一個(gè)值是否是給定構(gòu)造函數(shù)或類(lèi)的實(shí)例。通過(guò)這種類(lèi)型保護(hù)，可以測(cè)試一個(gè)對(duì)象或值是否是從一個(gè)類(lèi)派生的，這對(duì)于確定實(shí)例的類(lèi)型很有用。

instanceof 類(lèi)型保護(hù)的基本語(yǔ)法如下：

objectVariable instanceof ClassName ;
來(lái)看一個(gè)例子：

class CreateByClass1 {
  public age = 18;
  constructor() {}
}

class CreateByClass2 {
  public name = "TypeScript";
  constructor() {}
}

function getRandomItem() {
  return Math.random() < 0.5
    ? new CreateByClass1()
    : new CreateByClass2(); // 如果隨機(jī)數(shù)小于0.5就返回CreateByClass1的實(shí)例，否則返回CreateByClass2的實(shí)例
}

const item = getRandomItem();

// 判斷item是否是CreateByClass1的實(shí)例
if (item instanceof CreateByClass1) {
  console.log(item.age);
} else {
  console.log(item.name);
}
這里 if 的判斷邏輯中使用 instanceof 操作符判斷 item 。如果是 CreateByClass1 創(chuàng)建的，那它就有 age 屬性；如果不是，那它就有 name 屬性。

（2）typeof 類(lèi)型保護(hù)
typeof 類(lèi)型保護(hù)用于確定變量的類(lèi)型，它只能識(shí)別以下類(lèi)型：

boolean
string
bigint
symbol
undefined
function
number
對(duì)于這個(gè)列表之外的任何內(nèi)容，typeof 類(lèi)型保護(hù)只會(huì)返回 object。typeof 類(lèi)型保護(hù)可以寫(xiě)成以下兩種方式：

typeof v !== "typename"

typeof v === "typename"
typename 只能是number、string、boolean和symbol四種類(lèi)型，在 TS 中，只會(huì)把這四種類(lèi)型的 typeof 比較識(shí)別為類(lèi)型保護(hù)。

在下面的例子中，StudentId 函數(shù)有一個(gè) string | number 聯(lián)合類(lèi)型的參數(shù) x。如果變量 x 是字符串，則會(huì)打印 Student；如果是數(shù)字，則會(huì)打印 Id。typeof 類(lèi)型保護(hù)可以從 x 中提取類(lèi)型：

function StudentId(x: string | number) {
    if (typeof x == 'string') {
        console.log('Student');
    }
    if (typeof x === 'number') {
        console.log('Id');
    }
}

StudentId(`446`); // Student
StudentId(446);   // Id
（3）in 類(lèi)型保護(hù)
in 類(lèi)型保護(hù)可以檢查對(duì)象是否具有特定屬性。它通常返回一個(gè)布爾值，指示該屬性是否存在于對(duì)象中。

in 類(lèi)型保護(hù)的基本語(yǔ)法如下：

propertyName in objectName
來(lái)看一個(gè)例子：

interface Person {
  firstName: string;
  surname: string;
}

interface Organisation {
  name: string;
}

type Contact = Person | Organisation;

function sayHello(contact: Contact) {
  if ("firstName" in contact) {
    console.log(contact.firstName);
  }
}
in 類(lèi)型保護(hù)檢查參數(shù) contact 對(duì)象中是否存在 firstName屬性。如果存在，就進(jìn)入if 判斷，打印contact.firstName的值。






（4）自定義類(lèi)型保護(hù)
來(lái)看一個(gè)例子：

const valueList = [123, "abc"];

const getRandomValue = () => {
  const number = Math.random() * 10; // 這里取一個(gè)[0, 10)范圍內(nèi)的隨機(jī)值
  if (number < 5) {
    return valueList[0]; // 如果隨機(jī)數(shù)小于5則返回valueList里的第一個(gè)值，也就是123
  }else {
    return valueList[1]; // 否則返回"abc"
  }
};

const item = getRandomValue();

if (item.length) {
  console.log(item.length); // error 類(lèi)型“number”上不存在屬性“l(fā)ength”
} else {
  console.log(item.toFixed()); // error 類(lèi)型“string”上不存在屬性“toFixed”
}
這里，getRandomValue 函數(shù)返回的元素是不固定的，有時(shí)返回 number 類(lèi)型，有時(shí)返回 string 類(lèi)型。使用這個(gè)函數(shù)生成一個(gè)值 item，然后通過(guò)是否有 length 屬性來(lái)判斷是 string 類(lèi)型，如果沒(méi)有 length 屬性則為 number 類(lèi)型。在 JavaScript 中，這段邏輯是沒(méi)問(wèn)題的。但是在 TypeScript 中，因?yàn)?TS 在編譯階段是無(wú)法識(shí)別 item 的類(lèi)型的，所以當(dāng)在 if 判斷邏輯中訪問(wèn) item 的 length 屬性時(shí)就會(huì)報(bào)錯(cuò)，因?yàn)槿绻?item 為 number 類(lèi)型的話是沒(méi)有 length 屬性的。

這個(gè)問(wèn)題可以通過(guò)類(lèi)型斷言來(lái)解決，修改判斷邏輯即可：

if ((<string>item).length) {
  console.log((<string>item).length);
} else {
  console.log((<number>item).toFixed());
}
這里通過(guò)使用類(lèi)型斷言告訴 TS 編譯器，if 中的 item 是 string 類(lèi)型，而 else 中的是 number 類(lèi)型。這樣做雖然可以，但是需要在使用 item 的地方都使用類(lèi)型斷言來(lái)說(shuō)明，顯然有些繁瑣。

可以使用自定義類(lèi)型保護(hù)來(lái)解決上述問(wèn)題：

const valueList = [123, "abc"];

const getRandomValue = () => {
  const number = Math.random() * 10; // 這里取一個(gè)[0, 10)范圍內(nèi)的隨機(jī)值
  if (number < 5) return valueList[0]; // 如果隨機(jī)數(shù)小于5則返回valueList里的第一個(gè)值，也就是123
  else return valueList[1]; // 否則返回"abc"
};

function isString(value: number | string): value is string {
  const number = Math.random() * 10
  return number < 5;
}

const item = getRandomValue();

if (isString(item)) {
  console.log(item.length); // 此時(shí)item是string類(lèi)型
} else {
  console.log(item.toFixed()); // 此時(shí)item是number類(lèi)型
}
首先定義一個(gè)函數(shù)，函數(shù)的參數(shù) value 就是要判斷的值。這里 value 的類(lèi)型可以為 number 或 string，函數(shù)的返回值類(lèi)型是一個(gè)結(jié)構(gòu)為 value is type 的類(lèi)型謂語(yǔ)，value 的命名無(wú)所謂，但是謂語(yǔ)中的 value 名必須和參數(shù)名一致。而函數(shù)里的邏輯則用來(lái)返回一個(gè)布爾值，如果返回為 true，則表示傳入的值類(lèi)型為is后面的 type。

使用類(lèi)型保護(hù)后，if 的判斷邏輯和代碼塊都無(wú)需再對(duì)類(lèi)型做指定工作，不僅如此，既然 item 是 string類(lèi)型，則 else 的邏輯中，item 一定是聯(lián)合類(lèi)型中的另外一個(gè)，也就是 number 類(lèi)型。

8. 類(lèi)型斷言
（1）基本使用
TypeScrip的類(lèi)型系統(tǒng)很強(qiáng)大，但有時(shí)它是不如我們更了解一個(gè)值的類(lèi)型。這時(shí)，我們更希望 TypeScript 不要進(jìn)行類(lèi)型檢查，而是讓我們自己來(lái)判斷，這時(shí)就用到了類(lèi)型斷言。

使用類(lèi)型斷言可以手動(dòng)指定一個(gè)值的類(lèi)型。類(lèi)型斷言像是一種類(lèi)型轉(zhuǎn)換，它把某個(gè)值強(qiáng)行指定為特定類(lèi)型，下面來(lái)看一個(gè)例子：

const getLength = target => {
  if (target.length) {
    return target.length;
  } else {
    return target.toString().length;
  }
};
這個(gè)函數(shù)接收一個(gè)參數(shù)，并返回它的長(zhǎng)度。這里傳入的參數(shù)可以是字符串、數(shù)組或是數(shù)值等類(lèi)型的值，如果有 length 屬性，說(shuō)明參數(shù)是數(shù)組或字符串類(lèi)型，如果是數(shù)值類(lèi)型是沒(méi)有 length 屬性的，所以需要把數(shù)值類(lèi)型轉(zhuǎn)為字符串然后再獲取 length 值?，F(xiàn)在限定傳入的值只能是字符串或數(shù)值類(lèi)型的值：

const getLength = (target: string | number): number => {
  if (target.length) { // error 類(lèi)型"string | number"上不存在屬性"length"
    return target.length; // error  類(lèi)型"number"上不存在屬性"length"
  } else {
    return target.toString().length;
  }
};
當(dāng) TypeScript 不確定一個(gè)聯(lián)合類(lèi)型的變量到底是哪個(gè)類(lèi)型時(shí)，就只能訪問(wèn)此聯(lián)合類(lèi)型的所有類(lèi)型里共有的屬性或方法，所以現(xiàn)在加了對(duì)參數(shù)target和返回值的類(lèi)型定義之后就會(huì)報(bào)錯(cuò)。

這時(shí)就可以使用類(lèi)型斷言，將target的類(lèi)型斷言成string類(lèi)型。它有兩種寫(xiě)法：<type>value 和 value as type：

// 這種形式是沒(méi)有任何問(wèn)題的，建議使用這種形式
const getStrLength = (target: string | number): number => {
  if ((target as string).length) {      
    return (target as string).length;
  } else {
    return target.toString().length;
  }
};

// 這種形式在JSX代碼中不可以使用，而且也是TSLint不建議的寫(xiě)法
const getStrLength = (target: string | number): number => {
  if ((<string>target).length) {      
    return (<string>target).length;
  } else {
    return target.toString().length;
  }
};
類(lèi)型斷言不是類(lèi)型轉(zhuǎn)換，斷言成一個(gè)聯(lián)合類(lèi)型中不存在的類(lèi)型是不允許的。

注意： 不要濫用類(lèi)型斷言，在萬(wàn)不得已的情況下使用要謹(jǐn)慎，因?yàn)閺?qiáng)制把某類(lèi)型斷言會(huì)造成 TypeScript 喪失代碼提示的能力。

（2）雙重?cái)嘌?br>雖然類(lèi)型斷言是強(qiáng)制性的，但并不是萬(wàn)能的，在一些情況下會(huì)失效:

interface Person {
 name: string;
 age: number;
}
const person = 'ts' as Person; // Error
這時(shí)就會(huì)報(bào)錯(cuò)，很顯然不能把 string 強(qiáng)制斷言為一個(gè)接口 Person ，但是并非沒(méi)有辦法，此時(shí)可以使用雙重?cái)嘌?

interface Person {
 name: string;
 age: number;
}
const person = 'ts' as any as Person;
先把類(lèi)型斷言為 any ，再接著斷言為想斷言的類(lèi)型就能實(shí)現(xiàn)雙重?cái)嘌?，?dāng)然上面的例子肯定說(shuō)不通的，雙重?cái)嘌晕覀円哺唤ㄗh濫用，但是在一些少見(jiàn)的場(chǎng)景下也有用武之地。

（3）顯式賦值斷言
先來(lái)看兩個(gè)關(guān)于null和undefined的知識(shí)點(diǎn)。

① 嚴(yán)格模式下 null 和 undefined 賦值給其它類(lèi)型值

當(dāng)在 tsconfig.json 中將 strictNullChecks 設(shè)為 true 后，就不能再將 undefined 和 null 賦值給除它們自身和void 之外的任意類(lèi)型值了，但有時(shí)確實(shí)需要給一個(gè)其它類(lèi)型的值設(shè)置初始值為空，然后再進(jìn)行賦值，這時(shí)可以自己使用聯(lián)合類(lèi)型來(lái)實(shí)現(xiàn) null 或 undefined 賦值給其它類(lèi)型：

let str = "ts";
str = null; // error 不能將類(lèi)型“null”分配給類(lèi)型“string”
let strNull: string | null = "ts"; // 這里你可以簡(jiǎn)單理解為，string | null即表示既可以是string類(lèi)型也可以是null類(lèi)型
strNull = null; // right
strNull = undefined; // error 不能將類(lèi)型“undefined”分配給類(lèi)型“string | null”
注意，TS 會(huì)將 undefined 和 null 區(qū)別對(duì)待，這和 JavaScript 的本意也是一致的，所以在 TS 中，string|undefined、string|null和string|undefined|null是三種不同的類(lèi)型。

② 可選參數(shù)和可選屬性

如果開(kāi)啟了 strictNullChecks，可選參數(shù)會(huì)被自動(dòng)加上 |undefined：

const sum = (x: number, y?: number) => {
  return x + (y || 0);
};
sum(1, 2); // 3
sum(1); // 1
sum(1, undefined); // 1
sum(1, null); // error Argument of type 'null' is not assignable to parameter of type 'number | undefined'
根據(jù)錯(cuò)誤信息看出，這里的參數(shù) y 作為可選參數(shù)，它的類(lèi)型就不僅是 number 類(lèi)型了，它可以是 undefined，所以它的類(lèi)型是聯(lián)合類(lèi)型 number | undefined。

TypeScript 對(duì)可選屬性和對(duì)可選參數(shù)的處理一樣，可選屬性的類(lèi)型也會(huì)被自動(dòng)加上 |undefined。

interface PositionInterface {
  x: number;
  b?: number;
}
const position: PositionInterface = {
  x: 12
};
position.b = "abc"; // error
position.b = undefined; // right
position.b = null; // error
看完這兩個(gè)知識(shí)點(diǎn)，再來(lái)看看顯式賦值斷言。當(dāng)開(kāi)啟 strictNullChecks 時(shí)，有些情況下編譯器是無(wú)法在聲明一些變量前知道一個(gè)值是否是 null 的，所以需要使用類(lèi)型斷言手動(dòng)指明該值不為 null。下面來(lái)看一個(gè)編譯器無(wú)法推斷出一個(gè)值是否是null的例子：

function getSplicedStr(num: number | null): string {
  function getRes(prefix: string) { // 這里在函數(shù)getSplicedStr里定義一個(gè)函數(shù)getRes，我們最后調(diào)用getSplicedStr返回的值實(shí)際是getRes運(yùn)行后的返回值
    return prefix + num.toFixed().toString(); // 這里使用參數(shù)num，num的類(lèi)型為number或null，在運(yùn)行前編譯器是無(wú)法知道在運(yùn)行時(shí)num參數(shù)的實(shí)際類(lèi)型的，所以這里會(huì)報(bào)錯(cuò)，因?yàn)閚um參數(shù)可能為null
  }
  num = num || 0.1; // 這里進(jìn)行了賦值，如果num為null則會(huì)將0.1賦給num，所以實(shí)際調(diào)用getRes的時(shí)候，getRes里的num拿到的始終不為null
  return getRes("lison");
}
因?yàn)橛星短缀瘮?shù)，而編譯器無(wú)法去除嵌套函數(shù)的 null（除非是立即調(diào)用的函數(shù)表達(dá)式），所以需要使用顯式賦值斷言，寫(xiě)法就是在不為 null 的值后面加個(gè)!。上面的例子可以這樣改：

function getSplicedStr(num: number | null): string {
  function getLength(prefix: string) {
    return prefix + num!.toFixed().toString();
  }
  num = num || 0.1;
  return getLength("lison");
}
這樣編譯器就知道 num 不為 null，即便 getSplicedStr 函數(shù)在調(diào)用的時(shí)候傳進(jìn)來(lái)的參數(shù)是 null，在 getLength 函數(shù)中的 num 也不會(huì)是 null。

（4）const 斷言
const 斷言是 TypeScript 3.4 中引入的一個(gè)實(shí)用功能。在 TypeScript 中使用 as const 時(shí)，可以將對(duì)象的屬性或數(shù)組的元素設(shè)置為只讀，向語(yǔ)言表明表達(dá)式中的類(lèi)型不會(huì)被擴(kuò)大（例如從 42 到 number）。

function sum(a: number, b: number) {
  return a + b;
}

// 相當(dāng)于 const arr: readonly [3, 4]
const arr = [3, 4] as const;

console.log(sum(...arr)); // 7
這里創(chuàng)建了一個(gè) sum 函數(shù)，它以 2 個(gè)數(shù)字作為參數(shù)并返回其總和。const 斷言使我們能夠告訴 TypeScript 數(shù)組的類(lèi)型不會(huì)被擴(kuò)展，例如從 [3, 4] 到 number[]。通過(guò) as const，使得數(shù)組成為只讀元組，因此其內(nèi)容是無(wú)法更改的，可以在調(diào)用 sum 函數(shù)時(shí)安全地使用這兩個(gè)數(shù)字。

如果試圖改變數(shù)組的內(nèi)容，會(huì)得到一個(gè)錯(cuò)誤：

function sum(a: number, b: number) {
  return a + b;
}

// 相當(dāng)于 const arr: readonly [3, 4]
const arr = [3, 4] as const;

// 類(lèi)型“readonly [3, 4]”上不存在屬性“push”。
arr.push(5);
因?yàn)槭褂昧?const 斷言，因此數(shù)組現(xiàn)在是一個(gè)只讀元組，其內(nèi)容無(wú)法更改，并且嘗試這樣做會(huì)在開(kāi)發(fā)過(guò)程中導(dǎo)致錯(cuò)誤。

如果嘗試在不使用 const 斷言的情況下調(diào)用 sum 函數(shù)，就會(huì)得到一個(gè)錯(cuò)誤：

function sum(a: number, b: number) {
  return a + b;
}

// 相當(dāng)于 const arr: readonly [3, 4]
const arr = [3, 4];

// 擴(kuò)張參數(shù)必須具有元組類(lèi)型或傳遞給 rest 參數(shù)。
console.log(sum(...arr)); // ??? 7
TypeScript 警告我們，沒(méi)有辦法知道 arr 變量的內(nèi)容在其聲明和調(diào)用 sum() 函數(shù)之間沒(méi)有變化。

如果不喜歡使用 TypeScript 中的枚舉，也可以使用 const 斷言作為枚舉的替代品：

// 相當(dāng)于 const Pages: {readonly home: '/'; readonly about: '/about'...}
export const Pages = {
  home: '/',
  about: '/about',
  contacts: '/contacts',
} as const;
如果嘗試更改對(duì)象的任何屬性或添加新屬性，就會(huì)收到錯(cuò)誤消息：

// 相當(dāng)于 const Pages: {readonly home: '/'; readonly about: '/about'...}
export const Pages = {
  home: '/',
  about: '/about',
  contacts: '/contacts',
} as const;

// 無(wú)法分配到 "about" ，因?yàn)樗侵蛔x屬性。
Pages.about = 'hello';

// 類(lèi)型“{ readonly home: "/"; readonly about: "/about"; readonly contacts: "/contacts"; }”上不存在屬性“test”。
Pages.test = 'hello';
需要注意，const 上下文不會(huì)將表達(dá)式轉(zhuǎn)換為完全不可變的。來(lái)看例子：

const arr = ['/about', '/contacts'];

// 相當(dāng)于 const Pages: {readonly home: '/', menu: string[]}
export const Pages = {
  home: '/',
  menu: arr,
} as const;

Pages.menu.push('/test'); // ?
這里，menu 屬性引用了一個(gè)外部數(shù)組，我們可以更改其內(nèi)容。如果在對(duì)象上就地定義了數(shù)組，我們將無(wú)法更改其內(nèi)容。

// 相當(dāng)于 const Pages: {readonly home: '/', readonly menu: string[]}
export const Pages = {
  home: '/',
  menu: ['/about'],
} as const;

// 類(lèi)型“readonly ["/about"]”上不存在屬性“push”。
Pages.menu.push('/test');
（5）非空斷言
在 TypeScript 中感嘆號(hào) ( ! ) 運(yùn)算符可以使編譯器忽略一些錯(cuò)誤，下面就來(lái)看看它有哪些實(shí)際的用途的以及何時(shí)使用。

① 非空斷言運(yùn)算符
感嘆號(hào)運(yùn)算符稱(chēng)為非空斷言運(yùn)算符，添加此運(yùn)算符會(huì)使編譯器忽略u(píng)ndefined和null類(lèi)型。來(lái)看例子：

const parseValue = (value: string) => {
    // ...
};

const prepareValue = (value?: string) => {
    // ...
    parseValue(value);
};
對(duì)于 prepareValue 方法的 value 參數(shù)，TypeScript就會(huì)報(bào)出以下錯(cuò)誤：

類(lèi)型“string | undefined”的參數(shù)不能賦給類(lèi)型“string”的參數(shù)。
不能將類(lèi)型“undefined”分配給類(lèi)型“string”。
因?yàn)槲覀兿Ｍ?prepareValue 函數(shù)中的 value 是 undefined 或 string，但是我們將它傳遞給了 parseValue 函數(shù)，它的參數(shù)只能是 string。所以就報(bào)了這個(gè)錯(cuò)誤。

但是，在某些情況下，我們可以確定 value 不會(huì)是 undefined，而這就是需要非空斷言運(yùn)算符的情況：

const parseValue = (value: string) => {
  // ...
};

const prepareValue = (value?: string) => {
  // ...
  parseValue(value!);
};
這樣就不會(huì)報(bào)錯(cuò)了。但是，在使用它時(shí)應(yīng)該非常小心，因?yàn)槿绻?value 的值是undefined ，它可能會(huì)導(dǎo)致意外的錯(cuò)誤。

② 使用示例
既然知道了非空斷言運(yùn)算符，下面就來(lái)看幾個(gè)真實(shí)的例子。

在列表中搜索是否存在某個(gè)項(xiàng)目：

interface Config {
  id: number;
  path: string;
}

const configs: Config[] = [
  {
    id: 1,
    path: "path/to/config/1",
  },
  {
    id: 2,
    path: "path/to/config/2",
  },
];

const getConfig = (id: number) => {
  return configs.find((config) => config.id === id);
};

const config = getConfig(1);
由于搜索的內(nèi)容不一定存在于列表中，所以 config 變量的類(lèi)型是 Config | undefined，我們就可以使用可以使用費(fèi)控?cái)嘌赃\(yùn)算符告訴 TypeScript，config 應(yīng)該是存在的，因此不必假設(shè)它是 undefined。

const getConfig = (id: number) => {
  return configs.find((config) => config.id === id)!;
};

const config = getConfig(1);
這時(shí)，config 變量的類(lèi)型就是 Config。這時(shí)再?gòu)?config 中獲取任何屬性時(shí)，就不需要再檢查它是否存在了。

再來(lái)看一個(gè)例子，React 中的 Refs 提供了一種訪問(wèn) DOM 節(jié)點(diǎn)或 React 元素的方法：

const App = () => {
  const ref = useRef<HTMLDivElement>(null);

  const handleClick = () => {
    if(ref.current) {
      console.log(ref.current.getBoundingClientRect());
    }
  };

  return (
    <div className="App" ref={ref}>
      <button onClick={handleClick}>Click</button>
    </div>
  );
};
這里創(chuàng)建了一個(gè)簡(jiǎn)單的組件，它可以訪問(wèn) class 為 App 的 DOM 節(jié)點(diǎn)。組件中有一個(gè)按鈕，當(dāng)點(diǎn)擊該按鈕時(shí)，會(huì)顯示元素的大小以及其在視口中的位置。我們可以確定被訪問(wèn)的元素是在點(diǎn)擊按鈕后掛載的，所以可以在 TypeScript 中添加非空斷言運(yùn)算符表示這個(gè)元素是一定存在的：

const App = () => {
  const handleClick = () => {
    console.log(ref.current!.getBoundingClientRect());
  };
};
當(dāng)使用非空斷言運(yùn)算符時(shí)，就表示告訴TypeScript，我比你更了解這個(gè)代碼邏輯，會(huì)為此負(fù)責(zé)，所以我們需要充分了解自己的代碼之后再確定是否要使用這個(gè)運(yùn)算符。否則，如果由于某種原因斷言不正確，則會(huì)發(fā)生運(yùn)行時(shí)錯(cuò)誤。

作者：GUOZE


歡迎關(guān)注微信公眾號(hào) ：前端充電寶