溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在編寫 TS 時，它做了比我們看到的更多的事情，例如類型保護機制。讓我們編寫的代碼更加嚴謹，至于怎么回事，讓我們來看看吧。
由于這些機制的存在，就算你仍舊以 JS 原生的書寫方式，也能幫助你提前發現代碼中潛在的問題。（對于認為 TS 語句更復雜的人，也能實現 0 門檻，不改變已有的習慣也能享受靜態檢測的好處。）
類型保護就是一些表達式，它們會在運行時檢查以確保在某個作用域內的類型。
為了更簡單的理解，我們首先聲明一個聯合類型用于舉例：
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 中只能調用 聯合類型 中的 公共方法，例子中未 layEggs() 方法。除非你在調用指定對象數據的屬性或方法前，明確告訴 TS 數據對象是一個具體的類型。
類型斷言實現類型保護
我需要使用 <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 中尖括號 <> 有特殊的含義。
函數中使用 is 定位類型
我們將上面的 if 內的判斷封裝到函數中，獲得更方便的類型保護方式，此函數必須使用 parameterName is Type 的 類型謂語：
function isFish<T>(pet: Fish | Bird): pet is Fish {
return !!(<Fish>pet).swim;
}
此函數必須返回為 boolean 類型才生效，當返回 true 時則類型定位為 Fish ，返回 false 時則定位為 Fish 之外的類型（多個類型則以 聯合類型 定位）。
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 這幾種數據類型，則可以直接使用 typeof 關鍵字，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 進行類型保護
由于現在前端對于 面向對象 的開發項目越來越多，因此類的引用也更多了。那么類型保護用在此時，可謂是更加有重要，我們使用 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:
}
基于類型保護機制，在語句塊中編輯器會給予指定類型的 方法提示，以及類型檢測時會提示用戶。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
