TypeScript - 總覽

你好，有志於成為程序員的各位！今天，我們將踏上一段令人興奮的旅程，進入 TypeScript 的世界。作為你們親切友善的計算機科學老師，我將指導你們深入了解這門迷人的語言。所以，拿起你的虛擬背包，讓我們一起潛入水中吧！

TypeScript - Overview

TypeScript 是什麼？

想像你正在建造一座雄偉的樂高城堡。JavaScript 就像是擁有一套基本的樂高積木，而 TypeScript 則像是擁有同樣的積木，但有更多特別的部件和詳細的說明書。這就是 TypeScript 的本質——一個強大的 JavaScript 版本！

TypeScript 是由 Microsoft 開發和維護的開源編程語言。它是 JavaScript 的嚴格語法超集，這意味著任何有效的 JavaScript 代碼同時也是有效的 TypeScript 代碼。然而，TypeScript 在 JavaScript 的基礎上加上了可選的靜態類型和許多其他強大的特性。

以下是一個簡單的例子來說明差異：

// JavaScript
function greet(name) {
console.log("Hello, " + name + "!");
}

// TypeScript
function greet(name: string): void {
console.log(`Hello, ${name}!`);
}

在 TypeScript 的版本中，我們添加了類型信息。name 後面的 : string 指定 name 應該是字符串，而 : void 表示這個函數不返回任何東西。

TypeScript 的特點

現在，讓我們探討一些使 TypeScript 卓越出群的酷炫特性：

1. 靜態類型

TypeScript 最顯著的特性是其可選的靜態類型。這意味著你可以為你的變量、函數參數和返回值添加類型信息。這就像將正確形狀的積木放入正確的孔洞中——它幫助防止錯誤！

let age: number = 30;
let name: string = "Alice";
let isStudent: boolean = true;

function multiply(a: number, b: number): number {
return a * b;
}

在這個例子中，我們為我們的變量和函數指定了類型。這有助於及早發現錯誤，並使我們的代碼更具自文檔性。

2. 面向對象編程

TypeScript 完全支持面向對象編程概念，如類、接口和模塊。這就像擁有建造複雜結構的藍圖！

class Person {
private name: string;

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

greet(): void {
console.log(`Hello, my name is ${this.name}`);
}
}

let alice = new Person("Alice");
alice.greet(); // 輸出：Hello, my name is Alice

這段代碼定義了一個 Person 類，包含構造函數和方法。這是一種組織和結構化代碼的好方法。

3. 接口

TypeScript 中的接口允許你定義對象的結構。把它們看作是你的代碼必須遵守的合同。

interface Vehicle {
brand: string;
speed: number;
accelerate(): void;
}

class Car implements Vehicle {
brand: string;
speed: number;

constructor(brand: string) {
this.brand = brand;
this.speed = 0;
}

accelerate(): void {
this.speed += 10;
console.log(`${this.brand} is now going ${this.speed} mph`);
}
}

let myCar = new Car("Toyota");
myCar.accelerate(); // 輸出：Toyota is now going 10 mph

在這個例子中，我們定義了一個 Vehicle 接口和一個實現它的 Car 類。這保證了 Car 擁有 Vehicle 中指定的所有屬性和方法。

為什麼使用 TypeScript？

你可能會想，"為什麼我要麻煩學習 TypeScript，當我可以用 JavaScript 呢？" 好問題！讓我分享一個小故事。

當我第一次開始教編程時，我有一個學生建造了一個大型的 JavaScript 項目。一切看起來都很正常，直到幾個月後他試圖進行一些更改。他花了好幾個小時來調試本可以用 TypeScript 立即發現的問題。這就是我在 TypeScript 中發現的真正價值。

以下是一些使用 TypeScript 的有力理由：

增強的 IDE 支持：TypeScript 提供了更好的自動完成、導航和重構服務。
早期錯誤檢測：在編譯時而不是運行時捕獲錯誤。
提高可讀性：類型注釋使代碼具有自文檔性。
適合大型項目：TypeScript 的特性使管理和大修大型代碼庫更加容易。
未來的 JavaScript 特性：TypeScript 通常會在這些特性被廣泛使用之前實現未來的 JavaScript 特性。

TypeScript 的組成部分

TypeScript 由三個主要組成部分组成：

組件	描述
語言	語法、關鍵字和類型注釋
編譯器	TypeScript 編譯器（tsc）將 TypeScript 轉換為 JavaScript
語言服務	為編輯器和其他工具提供智能分析 TypeScript 代碼的方法

TypeScript 編譯器是生態系統中的關鍵部分。它讓你可以使用所有這些令人驚艷的特性，並最終得到可以在任何環境中運行的 JavaScript。

以下是一個簡單的例子來說明編譯過程：

// TypeScript 代碼 (hello.ts)
function greet(name: string): string {
return `Hello, ${name}!`;
}

console.log(greet("World"));

// 使用以下命令編譯：tsc hello.ts

// 結果生成的 JavaScript (hello.js)
function greet(name) {
return "Hello, " + name + "!";
}
console.log(greet("World"));

TypeScript 編譯器將我們的 TypeScript 代碼轉換為乾淨、標準的 JavaScript，可以在任何 JavaScript 環境中運行。

好了，各位！我們已經踏上了 TypeScript 世界的第一步。記住，學習一門新語言就像學習騎自行車——起初可能會顛簸，但隨著練習，你會很快馳騁。持續編程，持續學習，最重要的是，玩得開心！

Credits: Image by storyset