Articles
TypeScript 簡介
TypeScript 的基礎

TypeScript 的基礎

本文說明了 TypeScript 的基礎知識。

YouTube Video

執行「Hello World!」

首先，我們將使用 Visual Studio Code 在 TypeScript 中執行經典的「Hello World!」範例。

npm install -g typescript

使用 npm 命令安裝 typescript。

建立一個 tsconfig.json 文件。

1{
2  "compilerOptions": {
3    "target": "ES6",
4    "module": "CommonJS",
5    "outDir": "out",
6    "sourceMap": true
7  }
8}

建立 .vscode/launch.json 文件以支援在 Visual Studio Code 中執行 main.ts 文件。

 1{
 2    "version": "0.2.0",
 3    "configurations": [
 4        {
 5            "type": "node",
 6            "request": "launch",
 7            "name": "Launch Program",
 8            "skipFiles": [
 9                "<node_internals>/**"
10            ],
11            "program": "${workspaceFolder}/main.ts",
12            "preLaunchTask": "tsc: build - tsconfig.json",
13            "outFiles": [
14                "${workspaceFolder}/out/main.js"
15            ]
16        }
17    ]
18}

建立一個顯示「Hello World!」的 main.ts 文件。您可以在 Visual Studio Code 中按 F5 鍵來執行它。

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

透過這樣的配置，您可以在VSCode中執行TypeScript文件。

TypeScript 概觀

TypeScript（TS）是由微軟開發的 JavaScript 的超集。TypeScript 支援靜態類型，能讓程式碼更健壯且易於維護。

靜態類型

  • TypeScript 為 JavaScript 添加類型，並在編譯時進行類型檢查。這可以預先防止與類型相關的錯誤。
1let message: string = "Hello, TypeScript";
2console.log(message);

編譯

  • 由於 TypeScript 無法直接在瀏覽器中執行，需要轉譯（編譯）為 JavaScript。使用 tsc（TypeScript 編譯器）將 TS 文件轉譯為 JS 文件。

可選的類型註解

  • TypeScript 也會進行類型推斷，但在必要時允許您明確指定類型。這提升了程式碼的可讀性和可靠性。
1function greet(name: string): string {
2    return `Hello, ${name}`;
3}
4console.log(greet('John'));

介面（Interfaces）

  • TypeScript 提供了 interface 來定義物件的結構。這使得物件結構可以被嚴格管理。
1interface Person {
2    name: string;
3    age: number;
4}
5const user: Person = { name: "John", age: 30 };
6console.log(user.name);

類別

  • TypeScript 提供了對 JavaScript 類別語法的擴展，並支援繼承、存取修飾符（public、private、protected）以及抽象類別。
 1class Animal {
 2    protected name: string;
 3    constructor(name: string) {
 4        this.name = name;
 5    }
 6    speak(): void {
 7        console.log(`${this.name} makes a sound.`);
 8    }
 9}
10
11class Dog extends Animal {
12    speak(): void {
13        console.log(`${this.name} barks.`);
14    }
15}
16const animal = new Animal('Generic Animal');
17animal.speak();
18
19const dog = new Dog('Buddy');
20dog.speak();

泛型

  • 在 TypeScript 中，你可以使用泛型撰寫可重複使用且類型安全的代碼。
1function identity<T>(arg: T): T {
2    return arg;
3}
4console.log(identity<string>("Hello Generics"));

生態系統

  • TypeScript 與 JavaScript 生態系統完全相容，且可以直接使用現有的 JavaScript 代碼。此外，它與 React 和 Node.js 等流行的函式庫深度整合。

強大的開發工具

  • TypeScript 提供了先進的功能，例如在 VSCode 等編輯器中的自動完成、重構支援和錯誤檢查。

TypeScript 對於提升大型專案的可靠性和開發者生產力特別有幫助。

TypeScript 中的變數

這將解釋 TypeScript 中變數的基本概念和用法。

變數宣告

在 TypeScript 中，使用三個關鍵字來宣告變數：let、const 和 var。每個關鍵字具有不同的特性。

let 的範例：

let 擁有區塊作用域（僅在大括號 {} 內有效）。可以稍後重新賦值。

1let count: number = 10;
2console.log(count);  // Outputs: 10
3
4count = 20;
5console.log(count);  // Outputs: 20

const 的範例：

const 不能被重新賦值，因此一旦賦值後，值就不能改變。然而，物件和陣列的內容可以被修改。

1const pi: number = 3.14;
2console.log(pi);  // Outputs: 3.14
3
4// pi = 3.14159; // Error: Reassignment is not allowed
5
6const fruits: string[] = ["apple", "banana"];
7fruits.push("orange");
8console.log(fruits);  // Outputs: ["apple", "banana", "orange"]

var 的範例：

var 具有函式作用域，並且可以重新賦值。然而，由於忽略了區塊作用域，相較於 let 或 const，var 可能會導致預期外的行為。

 1var message: string = "Hello, world!";
 2console.log(message);  // Outputs: Hello, world!
 3
 4message = "Hello, TypeScript!";
 5console.log(message);  // Outputs: Hello, TypeScript!
 6
 7// (`var` ignores block scope)
 8if (true) {
 9    var localMessage = "Hello again!";
10}
11console.log(localMessage); // "Hello again!"

類型註解

在 TypeScript 中，您可以顯式地為變數註解類型。TypeScript 也支援類型推斷，但在複雜的情況下類型註解會更有用。

1let isDone: boolean = false;
2console.log(isDone);  // Outputs: false
3
4let userName: string = "Alice";
5console.log(userName);  // Outputs: Alice

未初始化的變數

如果變數在宣告時未初始化，預設值為 undefined。使用 let 宣告的變數如果未初始化，必須顯式地賦值為 undefined，或者其類型中需包含 undefined。

1let uninitialized: number | undefined;
2console.log(uninitialized);  // Outputs: undefined
3
4uninitialized = 5;
5console.log(uninitialized);  // Outputs: 5

變數作用域

let 和 const 具有區塊作用域，因此它們只在相同的區塊內有效。

1if (true) {
2    let blockScoped: string = "Block Scoped";
3    console.log(blockScoped);  // Outputs: Block Scoped
4}
5// console.log(blockScoped);  // Error: blockScoped is out of scope

變數提升

由於 TypeScript 是 JavaScript 的超集，它繼承了 JavaScript 的變數提升特性。提升是指變數和函數的宣告被視為已提升到其作用域頂部的行為。然而，只有宣告會被提升，而初始化部分仍保留在原處。使用 var 宣告的變數會被提升，但在宣告前使用 let 或 const 則會導致錯誤。

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10
  • 在這種情況下，使用 var 宣告的變數會被提升，其值也會被輸出。
1console.log(b); // ReferenceError
2let b = 20;
  • 使用 let 宣告的變數不會被提升，因此會導致錯誤。

總結

以下是 let、const 和 var 的總結。

  • let 可以重新賦值，並且擁有區塊作用域。
  • const 無法重新賦值，並且擁有區塊作用域。
  • var 可以重新賦值，但擁有函式作用域。
  • 它們都允許使用明確的類型註解來指定變數類型。

TypeScript 中的轉義字符

當特定字符無法直接輸入或需要表示字串中具有特殊含義的字符時，會使用轉義字符。在 TypeScript 中，轉義字符用於表示控制字符或特殊字符。

例如，使用 \n 來輸出包含換行符的訊息。

1const message: string = "Hello,\nWorld!";
2console.log(message);
3// Output:
4// Hello,
5// World!

轉義特殊字符

當需要在字串中包含特殊字符時，轉義字符也十分有用。例如，您可能希望直接在字串中使用雙引號或單引號。

1const singleQuoteExample: string = 'It\'s a beautiful day!';
2console.log(singleQuoteExample);
3// Output: It's a beautiful day!
4
5const doubleQuoteExample: string = "He said, \"Welcome!\"";
6console.log(doubleQuoteExample);
7// Output: He said, "Welcome!"

轉義反斜杠本身

若要在字串中包含反斜杠，您需要將其寫作雙反斜杠。

1const path: string = "C:\\Program Files\\MyApp";
2console.log(path);
3// Output: C:\Program Files\MyApp

Unicode 和十六進制轉義

在 TypeScript 中，可以使用轉義序列表示 Unicode 代碼點。

Unicode 轉義序列

您可以通過在 \u 後指定四位數十六進制數字來表示 Unicode 字符。

1const smileyFace: string = "\u263A";
2console.log(smileyFace);
3// Output: ☺ (Copyright Mark)

十六進制轉義

您可以通過在 \x 後指定兩位數十六進制數字來表示特定字符。

1const letterA: string = "\x41";
2console.log(letterA);
3// Output: A

模板字面量與轉義

模板字面量是用反引號包圍來定義的，並且提供了一種輕鬆的方式來創建嵌入的表達式或多行字串。普通的轉義字符可以直接用於模板字面量中。

1const multiLine: string = `This is
2a multi-line
3string.`;
4console.log(multiLine);
5// Output:
6// This is
7// a multi-line
8// string.

特殊情況

在 TypeScript 中，在字串中使用無效的轉義序列可能會導致語法錯誤。因此，檢查轉義字符是否有效非常重要。

1// Invalid escape sequence
2const invalidString: string = "\xZZ"; // Error

實際使用範例

以下是一個使用轉義字符構建複雜字串的範例。

1const jsonExample: string = "{\n\t\"name\": \"John Doe\",\n\t\"age\": 30\n}";
2console.log(jsonExample);
3// Output:
4// {
5//     "name": "John Doe",
6//     "age": 30
7// }

在此範例中，\n 用於換行，\t 用於添加縮進。這使得 JSON 結構更易於閱讀。

總結

在使用 TypeScript 的字串時，轉譯字元非常重要。當您想在字串中包含特殊字元或控制字元時，可以使用適當的轉譯序列來創建更具表達力的字串。正確理解和使用轉譯字元可以提升程式碼的可讀性和可維護性。

TypeScript 的版本

我們來概覽一下 TypeScript 的版本。

  1. TypeScript 1.0 (2014)

    TypeScript 的第一個穩定版本。引入了基本功能，例如類型、類別和模組。

  2. TypeScript 2.0 (2016)

    引入了 Non-nullable Types、Control Flow Analysis、Read-only Properties 和 Never 類型，增強了類型推斷。

  3. TypeScript 3.0 (2018)

    引入了一個更靈活的類型系統，包括 Project References、Tuple Types 擴展以及對 Rest Parameters 的改進。

  4. TypeScript 4.0 (2020)

    引入了 Variadic Tuple Types、編輯器改進、增強的類型推斷以及 Labelled Tuple Elements 等功能，以改善開發體驗。

  5. TypeScript 4.1 (2020)

    引入了 Template Literal Types，使字串類型操作更為強大。

  6. TypeScript 4.3 (2021)

    新增了 Override 關鍵字，改進了建構函數中的存取修飾符，並增強了對 WeakMap 和 WeakSet 的類型支援。

  7. TypeScript 4.5 (2021)

    新增了 Awaited 類型、ModuleSuffixes 及改進了與 ECMAScript 模組的相容性。

  8. TypeScript 5.0 (2023)

    實現了 Decorators 的標準化，提升了專案建置速度，增強了類型系統，並支援最新的 ECMAScript 特性。

TypeScript 不斷發展，每年發布多個版本，引入新功能與改進。

您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。

YouTube Video

TypeScript 的數據類型