模組（Modules）

什麼是模組？

模組是 TypeScript 中的一個關鍵概念，允許我們將程式碼組織成獨立的、可重用的結構。在 TypeScript 中，模組被用於隔離和封裝相關的變數、函式、類別和其他程式碼，以便更容易維護和共享。

模組的基本用法

// math.ts
export function add(a: number, b: number): number { // 具名匯出
  return a + b;
}

export function subtract(a: number, b: number): number { // 具名匯出
  return a - b;
}

export default function multiply(a: number, b: number): number { // 預設匯出
  return a * b;
}

在上面的範例中，我們建立了一個名為 math.ts 的模組，其中包含了三個函式 add 、 subtract 和 multiply。使用 export 關鍵字，我們將這些函式標記為可匯出，這樣它們就可以在其他檔案中引用和使用。

使用模組

我們來看一下如何在其他 TypeScript 檔案中使用 math.ts 模組：

• 具名匯出

當使用具名匯出時，我們必須使用 {} 解構方式匯入模組成員，並且名稱必須與匯出函式的名稱相符。

// app.ts
import { add, subtract } from './math'; // 具名匯出

const result1 = add(10, 5);
const result2 = subtract(10, 5);

console.log(`加法結果：${result1}`); // 加法結果：15
console.log(`減法結果：${result2}`); // 減法結果：5

• 預設匯出

當使用預設匯出時，我們不需要使用 {} 解構方式，並且可以為匯入的成員指定任何名稱，而不必與匯出的函式名稱相符。

// app.ts
import customMultiply from './math'; // 預設匯出

const result3 = customMultiply(10, 5);

console.log(`乘法結果：${result3}`); // 乘法結果：50

命名空間（Namespaces）

什麼是命名空間？

命名空間是 TypeScript 提供的一種結構，用於將相關的程式碼封裝在一個命名中，以防止全局的變數和函式命名衝突。它提供了一種組織程式碼的方式，使開發者可以更容易地將程式碼模塊化和重用。

命名空間的基本用法

// utils.ts
namespace MathUtils {
  export function add(a: number, b: number): number {
    return a + b;
  }

  export function subtract(a: number, b: number): number {
    return a - b;
  }

  export interface Score {
    name: string;
    points: number;
  }
}

在上面的範例中，我們建立了一個名為 MathUtils 的命名空間，其中包含了兩個函式 add 、 subtract 與一個介面 Score。這些函式及介面被封裝在 MathUtils 命名空間中，以避免全局的變數名稱衝突。

使用命名空間

我們來看一下如何在其他 TypeScript 檔案中使用 MathUtils 命名空間：

• /// <reference>

需要注意的是，使用 /// <reference> 需要一些額外的配置和管理，像是需要將 tsconfig.json 中 module 設定為 none 或 amd。

// utils.ts
namespace MathUtils {
  export function add(a: number, b: number): number {
    return a + b;
  }

  export function subtract(a: number, b: number): number {
    return a - b;
  }

  export interface Score {
    name: string;
    points: number;
  }
}

// app.ts
/// <reference path='utils.ts' />

const result1 = MathUtils.add(10, 5);
const result2 = MathUtils.subtract(10, 5);

console.log(`加法結果：${result1}`); // 加法結果：15
console.log(`減法結果：${result2}`); // 減法結果：5

const user: MathUtils.Score = {
  name: '肉鬆',
  points: 87,
};

console.log(`${user.name}數學考${user.points}分`); // 肉鬆數學考87分

• import 和 export

在 TypeScript 中，通常更推薦使用 import 和 export 來處理模組之間的依賴，而不是使用 /// <reference>。這樣可以更好地組織和管理程式碼。

// utils.ts
export namespace MathUtils {
  export function add(a: number, b: number): number {
    return a + b;
  }

  export function subtract(a: number, b: number): number {
    return a - b;
  }

  export interface Score {
    name: string;
    points: number;
  }
}

// app.ts
import { MathUtils } from './utils';

const result1 = MathUtils.add(10, 5);
const result2 = MathUtils.subtract(10, 5);

console.log(`加法結果：${result1}`); // 加法結果：15
console.log(`減法結果：${result2}`); // 減法結果：5

const user: MathUtils.Score = {
  name: '肉鬆',
  points: 87,
};

console.log(`${user.name}數學考${user.points}分`); // 肉鬆數學考87分

本日重點

1. 預設匯出：使用 export default 關鍵字來定義預設匯出，每個模組只能有一個預設匯出；在匯入時，我們可以為匯入的成員指定任何名稱。
2. 具名匯出：使用 export 關鍵字來定義具名匯出，可以有多個；在匯入時，我們必須使用 {} 解構方式匯入特定的成員。每個具名匯出都需要指定名稱。
3. 命名空間：使用 namespace 關鍵字來定義命名空間，可用於組織相關的功能。成員需要使用 export 來匯出，以便其他程式碼可以存取它們；在匯入時，我們可以使用 /// <reference> 或 import 語法，根據使用的方式不同。

參考

• TypeScript - 模組
• TypeScript - 命名空間
• TypeScript - 命名空間和模組