TypeScript - 類型守衛：初學者指南

你好，未來的編程超級明星！? 我很高興能成為您探索TypeScript和類型守衛世界的導遊。作為一個教了多年計算機科學的人，我可以告訴您，理解類型守衛就像在TypeScript宇宙中擁有一種超能力。那麼，讓我們一起跳水並解鎖這種力量吧！

TypeScript - Type Guards

類型守衛是什麼？

在我們深入細節之前，讓我們先了解一下類型守衛是什麼。想像你是一個豪華派對的安全警衛。你的工作是檢查每個賓客的請帖，確保他們能進入正確的地區。TypeScript中的類型守衛做的工作與此類似 - 它們幫助編譯器檢查並縮小某段代碼中變量的類型。

現在，讓我們探討我們今天將學習的三種主要類型守衛：

類型守衛	描述
typeof	檢查變量的類型
in	檢查對象中是否存在某個屬性
instanceof	檢查對象是否是某個類的實例

TypeScript中的'typeof'類型守衛

'typeof'類型守衛就像問，“你是什麼類型的東西？”它用來檢查變量的類型。讓我們看一個例子：

function printAll(strs: string | string[] | null) {
if (typeof strs === "object") {
for (const s of strs) {
console.log(s);
}
} else if (typeof strs === "string") {
console.log(strs);
} else {
// 不做任何事
}
}

在這個例子中，我們使用typeof來檢查strs是否是對象（這包括數組）或字符串。如果是對象，我們遍歷它。如果是字符串，我們直接打印它。

這裡有一個有趣的記憶方法：想像你在一個寵物店，你想知道一個動物是狗還是貓。你可能會問，“你是什麼類型的動物？”這正是typeof在TypeScript中的作用！

TypeScript中的'in'類型守衛

'in'類型守衛就像問，“你有這個特性嗎？”它檢查對象中是否存在某個屬性。讓我們看一個例子：

type Fish = { swim: () => void };
type Bird = { fly: () => void };

function move(animal: Fish | Bird) {
if ("swim" in animal) {
animal.swim();
} else {
animal.fly();
}
}

在這段代碼中，我們檢查animal是否有swim屬性。如果有，我們假設它是Fish並調用swim方法。如果不是，我們假設它是Bird並調用fly方法。

這就像這樣：如果你在試圖弄清楚你的新寵物是魚還是鳥，你可能会檢查它是否有魚鰭。這正是'in'類型守衛所做的 - 它檢查一個特徵屬性。

TypeScript中的'instanceof'類型守衛

'instanceof'類型守衛就像問，“你是這個家族的成員嗎？”它檢查對象是否是特定類的實例。這裡有一個例子：

class Bird {
fly() {
console.log("飛行...");
}
}

class Fish {
swim() {
console.log("游泳...");
}
}

function move(pet: Bird | Fish) {
if (pet instanceof Bird) {
pet.fly();
} else {
pet.swim();
}
}

let myBird = new Bird();
move(myBird); // 輸出: 飛行...

在這個例子中，我們檢查pet是否是Bird類的實例。如果是，我們調用fly方法。如果不是，我們假設它是Fish並調用swim方法。

想像你在一個家族聚會上，你試圖弄清楚某人是否是約翰遜家族的成員。你可能会問，“你是約翰遜家族的人嗎？”這正是instanceof在TypeScript中的作用！

結合所有內容

現在我們已經學習了這三種類型守衛，讓我們看看我們如何將它們全部一起使用：

class Car {
drive() { console.log("嗡嗡！"); }
}

class Bicycle {
ride() { console.log("踏板！"); }
}

type Vehicle = Car | Bicycle | string;

function useVehicle(vehicle: Vehicle) {
if (typeof vehicle === "string") {
console.log(`這個交通工具是：${vehicle}`);
} else if (vehicle instanceof Car) {
vehicle.drive();
} else if ("ride" in vehicle) {
vehicle.ride();
} else {
console.log("未知的交通工具類型");
}
}

useVehicle("滑板");  // 輸出: 這個交通工具是：滑板
useVehicle(new Car());     // 輸出: 嗡嗡！
useVehicle(new Bicycle()); // 輸出: 踏板！

在這個例子中，我們使用了所有三種類型守衛：

我們使用typeof來檢查交通工具是否是字符串。
我們使用instanceof來檢查它是否是Car。
我們使用in來檢查它是否有ride方法（這會表明它是Bicycle）。

這就像是一個超級偵探，使用你所有的技能來確定你正在處理的究竟是哪種交通工具！

結論

這就是了，我的編程學徒們！我們一起穿越了TypeScript類型守衛的土地，探索了typeof、in和instanceof守衛。這些強大的工具將幫助你寫出更安全、更可預測的代碼，因為TypeScript能更好地理解你的意圖。

記住，使用類型守衛就像和你的代碼進行友好的對話。你只是問一些問題來更好地理解它。所以下次你編程時，不要害羞 - 使用這些類型守衛與你的變量開始對話吧！

持續練習，保持好奇心，在你意識到之前，你將會像專家一樣守護類型。直到下次，快樂編程！??

Credits: Image by storyset