TypeScript - 功能特色：初學者指南

大家好，未來的程式設計師們！我很高興能成為你們在TypeScript世界的精彩旅程中的引路人。作為一個教了多年計算機科學的人，我親眼見證了TypeScript是多麼有力和轉型的。那麼，讓我們一起深入探討那些讓TypeScript成為開發者最好夥伴的出色功能吧！

TypeScript是什麼？

在我們深入了解功能之前，先快速了解一下TypeScript是什麼。想像你正在用樂高積木蓋房子。JavaScript就像是有一盒各種顏色的積木，而TypeScript就像是這些積木帶有特殊說明和規則，告訴你它們如何組合在一起。它幫助你建造更穩定、無錯誤的結構！

現在，讓我們探討那些讓TypeScript如此特別的功能。

型別注解

型別注解的基本概念

型別注解就像在盒子上貼標籤來描述裡面的內容。在TypeScript中，我們用它來告訴計算機我們正在處理什麼類型的數據。

let myName: string = "Alice";
let myAge: number = 30;
let isStudent: boolean = true;

在這個例子中，我們告訴TypeScript：

• myName 只應包含文字（字符串）
• myAge 只應是一個數字
• isStudent 是 true 或 false（布爾值）

這有助於防止一些愚蠢的錯誤，比如試圖對某人的名字進行數學計算！

這為什麼有用

想像你在烹飪時，不小心把糖倒進義大利醬汁裡而不是鹽。型別注解有助於防止代碼中出現這種類型的混亂。它在錯誤發生之前就捕捉到它們，節省你的時間和麻煩！

接口

接口就像是對象的藍圖。它們定義了對象應該具有的結構。

interface Person {
name: string;
age: number;
greet(): void;
}

let student: Person = {
name: "Bob",
age: 20,
greet: function() {
console.log("Hello, I'm " + this.name);
}
};

在這裡，我們創建了一個 Person 接口，它說任何 Person 對象必須有一個 name、一個 age 和一個 greet 函數。這就像告訴某人，“如果你想在這個程序中成為一個人，你需要這些東西！”

類

類就像是對象的cookie模具。它們讓我們創建有相同結構和行為的多個對象。

class Dog {
name: string;
breed: string;

constructor(name: string, breed: string) {
this.name = name;
this.breed = breed;
}

bark() {
console.log(this.name + " says Woof!");
}
}

let myDog = new Dog("Buddy", "Golden Retriever");
myDog.bark(); // 輸出：Buddy says Woof!

在這個例子中，我們創建了一個 Dog 類。它就像是創造狗對象的模板。每隻狗都有名字和品種，並能叫。這比單獨寫出每隻狗的屬性和方法要容易得多！

繼承

繼承就像從父母那裡遺傳特徵給孩子。在編程中，它允許一個類從另一個類繼承屬性和方法。

class Animal {
name: string;

constructor(name: string) {
this.name = name;
}

move() {
console.log(this.name + " is moving.");
}
}

class Cat extends Animal {
meow() {
console.log(this.name + " says Meow!");
}
}

let myCat = new Cat("Whiskers");
myCat.move(); // 輸出：Whiskers is moving.
myCat.meow(); // 輸出：Whiskers says Meow!

在這裡，Cat 繼承自 Animal。這意味著 Cat 擁有 Animal 有的一切（比如 name 屬性和 move 方法），還有它自己獨特的 meow 方法。

枚舉

枚舉就像是預定義的選項列表。當你有一組固定的值，某個東西可以是這些值中的一個時，它們非常有用。

enum DaysOfWeek {
Monday,
Tuesday,
Wednesday,
Thursday,
Friday,
Saturday,
Sunday
}

let today: DaysOfWeek = DaysOfWeek.Wednesday;
console.log(today); // 輸出：2（因為它是列表中的第三個項目，從0開始）

枚舉使你的代碼更具可讀性，並通過限制變量可以有的可能值來幫助防止錯誤。

泛型

泛型就像是紙牌遊戲中的萬用牌。它們允許你寫出靈活、可重用的函數和類，這些函數和類可以與不同的類型一起工作。

function identity<T>(arg: T): T {
return arg;
}

let output1 = identity<string>("Hello");
let output2 = identity<number>(42);

console.log(output1); // 輸出：Hello
console.log(output2); // 輸出：42

在這個例子中，<T> 是一個類型變量。它允許 identity 函數與任何類型一起工作，同時仍然保持類型安全。

聯合類型

聯合類型就像是具有多重人格類型。它們允許一個變量是幾種類型中的一種。

let mixedType: string | number;
mixedType = "Hello";
console.log(mixedType); // 輸出：Hello

mixedType = 42;
console.log(mixedType); // 輸出：42

這在你不確定將會接收到什麼類型的數據，但你知道它可能是幾個特定類型中的一個時非常有用。

類型守衛

類型守衛就像是代碼中的安全檢查。它們幫助你在 certain 塊代碼內縮小變量的類型。

function printLength(obj: string | string[]) {
if (typeof obj === "string") {
console.log("Length of string: " + obj.length);
} else {
console.log("Length of array: " + obj.length);
}
}

printLength("Hello"); // 輸出：Length of string: 5
printLength(["a", "b", "c"]); // 輸出：Length of array: 3

類型守衛幫助 TypeScript 了解在不同的上下文中變量的類型，允許你安全地使用類型特定的操作。

結論

好了，各位！我們一起穿越了TypeScript功能的精彩風景。記住，學習編程就像學習一門新語言 - 它需要練習和耐心。不要害怕嘗試和犯錯誤；這是我們學習得最好的方式！

持續編碼，持續學習，在你意識到之前，你將會用TypeScript建造令人驚奇的事物。大家編碼快樂！

Credits: Image by storyset