淺談TypeScript的類型保護機制

在編寫 TS 時，它做了比我們看到的更多的事情，例如類型保護機制。讓我們編寫的代碼更加嚴謹，至于怎么回事，讓我們來看看吧。

由于這些機制的存在，就算你仍舊以 JS 原生的書寫方式，也能幫助你提前發(fā)現(xiàn)代碼中潛在的問題。（對于認為 TS 語句更復(fù)雜的人，也能實現(xiàn) 0 門檻，不改變已有的習(xí)慣也能享受靜態(tài)檢測的好處。）

類型保護就是一些表達式，它們會在運行時檢查以確保在某個作用域內(nèi)的類型。

為了更簡單的理解，我們首先聲明一個聯(lián)合類型用于舉例：

interface Bird {
 fly(): any;
 layEggs(): any;
}

interface Fish {
 swim(): any
 layEggs(): any
}

type Pet = Bird | Fish;

無類型保護時報錯

function fn(pet: Pet) { 
 pet.layEggs(); // okay
 pet.swim();  // Error: Property 'swim' does not exist on type 'Bird | Fish'.
}

因為 TS 并不知道 pet 的實例是 Bird 還是 Fish，因此為了謹慎起見，在未手動聲明類型時 TS 中只能調(diào)用 聯(lián)合類型 中的 公共方法，例子中未 layEggs() 方法。除非你在調(diào)用指定對象數(shù)據(jù)的屬性或方法前，明確告訴 TS 數(shù)據(jù)對象是一個具體的類型。

類型斷言實現(xiàn)類型保護

我需要使用 <Fish>pet 的 類型斷言，來告訴 TS 目標對象是什么類型：

function fn(pet: Fish | Bird) {
 if ((<Fish>pet).swim) {
  (<Fish>pet).swim();
 } else {
  (<Bird>pet).fly();
 }
}

雖然這樣的斷言滿足了我們的需求，但并不好方便，需要在各處都進行引用。
備注：如果在編寫 tsx 時，你需要將 (<Fish>pet) 寫成 (pet as Fish)，因為在 tsx 中尖括號 <> 有特殊的含義。

函數(shù)中使用 is 定位類型

我們將上面的 if 內(nèi)的判斷封裝到函數(shù)中，獲得更方便的類型保護方式，此函數(shù)必須使用 parameterName is Type 的 類型謂語：

function isFish<T>(pet: Fish | Bird): pet is Fish {
 return !!(<Fish>pet).swim;
}

此函數(shù)必須返回為 boolean 類型才生效，當(dāng)返回 true 時則類型定位為 Fish ，返回 false 時則定位為 Fish 之外的類型（多個類型則以 聯(lián)合類型 定位）。

function fn(pet: Fish | Bird ) { 
 if (isFish(pet)) {
  pet.swim(); // 因 is 語句的生效，此語句塊中類型 let pet: Fish
 } else {
  pet.fly(); // 排除 Fish 之外的類型，此語句塊中類型 let pet: Bird
 }
}

需要注意是除了 if 中類型生效，TS 還能自動推斷出 else 中的類型。

就算你不使用 TS 這些特定的語句，也能享受 類型保護機制 的好處，下面讓我們來看看。

使用 typeof 進行類型保護

如果子類型是只是 number、string、boolean、symbol 這幾種數(shù)據(jù)類型，則可以直接使用 typeof 關(guān)鍵字，TS 能夠檢測并提供類型保護，我們直接引用官方給的例子：

function padLeft(value, padding): string {
  if (typeof padding === "number") {
    return Array(padding + 1).join(" ") + value;  // let padding: number
  }
  else {
    return padding + value;  // let padding: string
  }
}
  
const t1 = padLeft("world", 6);    // "   world"
const t2 = padLeft("world", "hello "); // "hello world"

使用 instanceof 進行類型保護

由于現(xiàn)在前端對于 面向?qū)ο?的開發(fā)項目越來越多，因此類的引用也更多了。那么類型保護用在此時，可謂是更加有重要，我們使用 instanceof 來達到這一效果：

interface IA { x(): void; }
interface IB { y(): void; }

class A implements IA {
 x() { }
}
class B implements IB {
 y() { }
}

function fn(e: A | B) {
 if (e instanceof A)
  e.x(); // let e: A
 else
  e.y(); // let e: 
}

基于類型保護機制，在語句塊中編輯器會給予指定類型的 方法提示，以及類型檢測時會提示用戶。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。