TypeScript - 基本語法

你好，未來的 TypeScript 巫師們！? 我很高興能成為你們這次令人興奮的 TypeScript 世界的引路人。作為一個教了多年編程的人，我可以告訴你們，TypeScript 就像是 JavaScript 的超級加強版，它將會讓你的編碼生活變得更加輕鬆。我們來一起深入探索吧！

TypeScript - Basic Syntax

你的第一個 TypeScript 代碼

好啦，想像一下你即將在新的語言中寫下你的第一行代碼。興奮吧？讓我們從經典的 "Hello, World!" 程式開始。

console.log("Hello, World!");

現在，你可能會想，"等一下，這看起來和 JavaScript 一模一樣！" 而你這麼想是對的！TypeScript 是 JavaScript 的超集，這意味著所有有效的 JavaScript 代碼同時也是有效的 TypeScript 代碼。但別擔心，我們很快就會接触到 TypeScript 獨有的酷炫功能。

讓我們試試一些更 TypeScript 風格的東西：

let message: string = "Hello, TypeScript!";
console.log(message);

這裡發生了什麼：

我們聲明了一個名為 message 的變量
: string 的部分告訴 TypeScript 這個變量應該只持有字符串值
我們將字符串 "Hello, TypeScript!" 賦值給這個變量
最後，我們把它打印到控制台

這只是 TypeScript 类型系統的一個簡單體驗，這是其最強大的功能之一。它就像一個友好的機器人助手，在你甚至還沒有運行代碼之前就能捕獲你的錯誤！

編譯和執行 TypeScript 程式

現在我們已經寫了一些 TypeScript 代碼，那我們該如何實際運行它呢？由於瀏覽器和 Node.js 直接不支持 TypeScript，所以我們需要先將其編譯為 JavaScript。這就像把 TypeScript 翻譯成計算機已經知道的語言。

以下是如何操作的：

將你的 TypeScript 代碼保存到一個以 .ts 擴展名結尾的文件中，比如 hello.ts
打開你的終端或命令提示符
切換到包含你的文件的目錄
執行 TypeScript 編譯器：

tsc hello.ts

這會在同一目錄中創建一個名為 hello.js 的新文件。那就是你的 TypeScript 代碼被翻譯成的 JavaScript！

要運行它，你可以使用 Node.js：

node hello.js

然後，voila！你應該會在控制台中看到你的信息被打印出來。

編譯器標誌

TypeScript 編譯器非常聰明，但有時候你可能想給它一些特定的指示。這就是編譯器標誌的用處。它們就像你可以給編譯器的特殊命令，以改變它的行為。

以下是一些常見的編譯器標誌：

標誌	描述
--outDir	指定所有輸出文件的輸出文件夹
--target	指定 ECMAScript 目標版本
--watch	監視輸入文件
--strict	啟用所有嚴格的類型檢查選項

例如，如果你想把 TypeScript 編譯為一個較老版本的 JavaScript 以便於兼容，你可以使用：

tsc --target ES5 hello.ts

這告訴編譯器生成與 ECMAScript 5 兼容的 JavaScript。

TypeScript 中的標識符

在編程中，我們使用標識符來為變量、函數和類等事物命名。把它們看作是你代碼不同部分的標籤。在 TypeScript 中，這些名稱有一些規則：

它們可以包含字母、數字、下劃線和美元符號
它們必須以字母、下劃線或美元符號開頭
它們是大小寫敏感的（所以 myVariable 和 MyVariable 是不同的）
它們不能是保留關鍵字（我們將在下一節討論這些）

以下是一些有效的標識符：

let firstName: string = "John";
let _count: number = 5;
let $price: number = 9.99;
let camelCaseIsCommon: boolean = true;

以及一些無效的：

let 123abc: string = "Invalid"; // 不能以數字開頭
let my-variable: number = 10; // 不能使用連字符
let class: string = "Reserved keyword"; // 不能使用保留關鍵字

TypeScript ─ 關鍵字

關鍵字是在 TypeScript 中具有特定含義的特殊單詞。它們就像是語言的詞彙。你不能將它們用作標識符，因為 TypeScript 已經為它們分配了特定的工作。

以下是一些常見的 TypeScript 關鍵字：

關鍵字	描述
let	聲明一個區塊作用域的變量
const	聲明一個區塊作用域的常量
if	開始一個 if 語句
for	開始一個 for 循环
function	聲明一個函數
class	聲明一個類
interface	聲明一個接口
type	聲明一個類型別名

例如：

let x: number = 5;
const PI: number = 3.14159;

if (x > 0) {
console.log("x is positive");
}

for (let i = 0; i < 5; i++) {
console.log(i);
}

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

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

interface Shape {
area(): number;
}

type Point = {
x: number;
y: number;
};

每個關鍵字在結構和定義你的代碼時都有其特定的用途。

TypeScript 中的註釋

註釋就像是你在代碼中留下的給自己（或其他開發者）的小筆記。它們被編譯器忽略，所以你可以用它們來解釋你的代碼是幹什麼的，而不會影響代碼的運行。

TypeScript 支持三種類型的註釋：

單行註釋：

// 這是一個單行註釋
let x: number = 5; // 你也可以把註釋放在行尾

多行註釋：

/* 這是一個多行註釋
它可以跨越多行
用於更長的解釋 */
let y: number = 10;

文檔註釋：
```
/**
```

這是一個文檔註釋
它通常用於為函數或類生成文檔
@param name 要問候的名字
@returns 一個問候信息 */ function greet(name: string): string { return Hello, ${name}!; }

記住，好的註釋應該解釋你為什麼要這麼做，而不僅僅是解釋你做了什麼。代碼本身應該足夠清晰，能夠顯示發生了什麼。

TypeScript 和面向對象編程

TypeScript 的一个好處之一就是它支持面向對象編程（OOP）。如果你是編程新手，可以把 OOP 看作是一種組織代碼的方式，將代碼圍繞著具有屬性和行為的“對象”。

讓我們創建一個簡單的 Car 類來演示：

class Car {
// 屬性
make: string;
model: string;
year: number;

// 构造器
constructor(make: string, model: string, year: number) {
this.make = make;
this.model = model;
this.year = year;
}

// 方法
describe(): string {
return `This is a ${this.year} ${this.make} ${this.model}.`;
}
}

// 創建 Car 的實例
let myCar = new Car("Toyota", "Corolla", 2022);

console.log(myCar.describe()); // 輸出: This is a 2022 Toyota Corolla.

讓我們來分析一下：

我們定義了一個 Car 類，它有 make、model 和 year 的屬性
constructor 是一個特別的方法，當我們創建新的 Car 時它會被調用
describe 方法返回一個描述汽車的字符串
我們創建了一個新的 Car 對象並調用了它的 describe 方法

TypeScript 的類型系統在面向對象編程中非常出色。它能夠捕獲像將字符串賦值給 year 屬性或調用不存在的方法這樣的錯誤。

這就是 TypeScript 的入門！記住，學習編程是一段旅程，而不是一個目的地。不要擔心如果一切不能立即理解 —— 繼續練習，持續嘗試，最重要的是，保持樂趣！在你意識到之前，你將會编写复雜的 TypeScript 应用程序，並且會奇怪沒有靜態類型檢查的日子是如何度過的。開心編程！?

Credits: Image by storyset

上一教程:

TypeScript - 環境設定

下一教程:

TypeScript 與 JavaScript