TypeScript- 聯(lián)合類型和類型別名

?????? 聯(lián)合類型

• 聯(lián)合類型通常與 null 或 undefined 一起使用

const sayHello = (name:string|undefined) => {
    /* */
}

• 這里 name 的類型是 string | undefined 意味著可以將 string 或 undefined 的值傳遞給 sayHello 函數(shù).

sayHello('Leslie')
sayHello(undefined)

• 通過這個(gè)示例, 你可以憑直覺知道類型 A 和類型 B 聯(lián)合后的類型是同時(shí)接受 A 和 B 值的類型. 此外, 對(duì)于聯(lián)合類型來說, 你可能會(huì)遇到以下的用法:

const num: 1 | 2 = 1
type isMan = true | false
type EventNames = 'click' | 'scroll' | 'mousemove'

• 以上示例中的1,2或者click,scroll,mousemove被稱為字面量類型, 用來約束取值只能是某幾個(gè)值中的一個(gè)

?????? 可辨識(shí)聯(lián)合

• TypeScript 可辨識(shí)聯(lián)合(Discriminated Unions)類型, 也稱為代數(shù)數(shù)據(jù)類型或標(biāo)簽聯(lián)合類型.它包含 3 個(gè)要點(diǎn): 可辨識(shí), 聯(lián)合類型 和 類型守衛(wèi).

• 這種類型的本質(zhì)是結(jié)合聯(lián)合類型和字面量類型的一種類型保護(hù)方法. 如果一個(gè)類型是多個(gè)類型的聯(lián)合類型, 且多個(gè)類型含有一個(gè)公共屬性, 那么就可以利用這個(gè)公共屬性, 來創(chuàng)建不同的類型保護(hù)區(qū)塊.

?????? 可辨識(shí) ??????

• 可辨識(shí)要求聯(lián)合類型中的每個(gè)元素都含有一個(gè)單例類型屬性,比如:

enum CarTransmission {
  Automatic = 200,
  Manual = 300
}

interface Motorcycle {
  vType: "motorcycle"; // discriminant
  make: number; // year
}

interface Car {
  vType: "car"; // discriminant
  transmission: CarTransmission
}

interface Truck {
  vType: "truck"; // discriminant
  capacity: number; // in tons
}

• 在上述代碼中, 我們分別定義了 Motorcycle 、 Car 和 Truck 三個(gè)接口, 在這些接口中都包含一個(gè) vType 屬性, 該屬性被稱為可辨識(shí)的屬性, 而其它的屬性只跟特性的接口相關(guān).

?????? 聯(lián)合類型 ??????

• 基于前面定義了三個(gè)接口, 我們可以創(chuàng)建一個(gè) Vehicle 聯(lián)合類型:

type Vehicle = Motorcycle | Car | Truck;

• 現(xiàn)在我們就可以開始使用 Vehicle 聯(lián)合類型, 對(duì)于 Vehicle 類型的變量, 它可以表示不同類型的車輛.

?????? 類型守衛(wèi) ??????

• 下面我們來定義一個(gè) evaluatePrice 方法, 該方法用于根據(jù)車輛的類型、容量和評(píng)估因子來計(jì)算價(jià)格, 具體實(shí)現(xiàn)如下:

const EVALUATION_FACTOR = Math.PI; 

function evaluatePrice(vehicle: Vehicle) {
  return vehicle.capacity * EVALUATION_FACTOR;
}

const myTruck: Truck = { vType: "truck", capacity: 9.5 };
evaluatePrice(myTruck);

• 對(duì)于以上代碼, TypeScript 編譯器將會(huì)提示以下錯(cuò)誤信息:

// Property 'capacity' does not exist on type 'Vehicle'.
// Property 'capacity' does not exist on type 'Motorcycle'.

• 原因是在 Motorcycle 接口中, 并不存在 capacity 屬性, 而對(duì)于 Car 接口來說, 它也不存在 capacity 屬性. 那么, 現(xiàn)在我們應(yīng)該如何解決以上問題呢? 這時(shí), 我們可以使用類型守衛(wèi). 下面我們來重構(gòu)一下前面定義的 evaluatePrice 方法, 重構(gòu)后的代碼如下：

function evaluatePrice(vehicle: Vehicle) {
  switch(vehicle.vType) {
    case "car":
      return vehicle.transmission * EVALUATION_FACTOR;
    case "truck":
      return vehicle.capacity * EVALUATION_FACTOR;
    case "motorcycle":
      return vehicle.make * EVALUATION_FACTOR;
  }
}

• 在以上代碼中, 我們使用 switch 和 case 運(yùn)算符來實(shí)現(xiàn)類型守衛(wèi), 從而確保在 evaluatePrice 方法中, 我們可以安全地訪問 vehicle 對(duì)象中的所包含的屬性, 來正確的計(jì)算該車輛類型所對(duì)應(yīng)的價(jià)格.

?????? 類型別名

• 類型別名用來給一個(gè)類型起個(gè)新名字

type Message = string | string[];

let greet = (message: Message) => {
  // ...
};
greet("ss"); // OK
greet([`1`, `2`]); // OK

?? 看完三件事