詳解TypeScript中的型別保護
概述
在 TypeScript 中使用聯合型別時,往往會碰到這種尷尬的情況:
interface Bird { // 獨有方法 fly(); // 共有方法 layEggs(); } interface Fish { // 獨有方法 swim(); // 共有方法 layEggs(); } function getSmallPet(): Fish | Bird { // ... } let pet = getSmallPet(); pet.layEggs(); // 正常 pet.swim(); // ts 報錯
如上所示,getSmallPet函式中,既可以返回 Fish 型別的物件,又可以返回 Bird 型別的物件。由於返回的物件型別不確定,所以使用聯合型別物件共有的方法時,一切正常,但是使用聯合型別物件各自獨有的方法時,ts 會報錯。
那麼如何解決這個問題呢?最粗暴的方法當然是將聯合型別轉換為 any,不過這種方法不值得提倡,畢VUdtyw竟我們寫的是 TypeScript 而不是 AnyScript。
此時,我們使用今天的主角——型別保護,閃亮登場,它可以完美的解決這個問題。
孔乙己說過,茴香豆有四種寫法,同理,實現型別保護,也有四種寫法。
型別斷言
型別斷言是最常用的一種型別保護方法,即直接指定型別。由於,TypeScript 中識別的型別大多是靠 TypeScript 的自動型別推算算出來的,所以會出現上面所說的那種問題,即 TypeScript 不知道具體物件型別是什麼,所以不確定有沒有聯合型別各自獨有的方法。
當使用型別斷言直接指定型別時,相當於你讓 TypeScript 開啟了上帝模式,可以直接知道具體型別是聯合型別中的那個,此時再使用物件的獨有方法就符合 TypeScript 的推斷了。
interface Bird { // 獨有方法 fly(); // 共有方法 layEggs(); } interface Fish { // 獨有方法 swim(); // 共有方法 layEggs(); } function getSmallPet(): Fish | Bird { // ... } let pet = getSmallPet(); pet.layEggs(); // 正常 // 通過鴨子型別來進行判斷 if ((pet as Bird).fly) { // 型別斷言 (pet as Bird).fly() } else { // 型別斷言 (pet as Fish).swim() }
如果嫌棄通過 as 來進行型別斷言不夠上流,還可以使用類泛型的寫法,即:
let pet = getSmallPet(); pet.layEggs(); // 正常 // 通過鴨子型別來進行判斷 if ((<Bird>pet).fly) { (<Bird>pet).fly() } else { (<Fish>pet).swim() }
tips:友情提示,雖然使http://www.cppcns.com用類泛型寫法進行型別斷言看起來高階一些,但是由於在 tsx 中語法存在歧義,所以為了統一起見,推薦使用 as 的方法進行型別斷言。
in語法
在js中,我們經常使用 in 語法來判斷指定的屬性程式設計客棧是否在指定的物件或其原型鏈中。
同理,在 TypeScript 中,我們可以通過這種方法確認物件型別。
interface Bird { // 獨有方法 fly(); // 共有方法 layEggs(); } interface Fish { // 獨有方法 swim(); // 共有方法 layEggs(); } function getSmallPet(): Fish | Bird { // ... } let pet = getSmallPet(); pet.layEggs(); // 正常 // 使用 in 語法進行型別保護 if ('fly' in pet) { pet.fly() } else { pet.swim() }
原理同類型斷言一樣,都是引導 TypeScript 的型別推斷,確定物件型別。
instanceof 語法
當聯合型別中使用的是 class 而不是 interface 時,instanceof 語法就派上用場了,通過 instanceof 語法可以區分不同的 class 型別。
class Bird { // 獨有方法 fly() {}; // 共有方法 layEggs() {}; } class Fish { // 獨有方法 swim() {}; // 共有方法 layEggs() {}; } function getSmallPet(): Fish | Bird { // ... } let pet = getSmallPet(); pet.layEggs(); // 正常 // 使用 in 語法進行 if (pet instanceof Bird) { pet.fly() } else { pet.swim() }
typeof 語法
typeof 語法不同於 in 語法以及 instanceof 語法,in 語法以及 instanceof 語法都是用來引導型別推斷進行不同物件型別推斷,而 typeof 語法常用於基本型別的推斷(或者是聯合使用基本型別和物件型別)。
簡而言之,當使用 typeof 能夠區分聯合型別中的不同型別時,即可使用它。
function getSmallPet(): number | string {
// ...
}
let pet VUdtyw= getSmallPet();
if (typeof pet === 'number') {
pet++
} else {
pet = Number(pet) + 1
}
總結
就如茴香豆的四種寫法的本質依然是茴香豆一樣,型別保護的四種寫法的本質也是一樣的,即,引導 TypeScript 中的型別推斷將型別推斷的多選題變為單選題,這就是型別保護的本質。
以上就是詳解TypeScript中的型別保護的詳細內容,更多關於TypeScript型別保護的資料請關注我程式設計客棧們其它相關文章!