在開發大型應用時，把程式碼分割成多個檔案是很重要的。這不僅讓程式碼更容易維護，也能夠提高團隊開發品質。這時候模組 (modules) 就相當好用了。TypeScript 提供了模組系統，讓我們可以把程式碼分散到不同檔案中，並且能夠相互依賴、互相引用。簡單來說，模組就像是把你的程式碼「打包」成一個一個的單位，可以根據需求導入 (import) 或導出 (export)。

模組的基本概念

在 TypeScript 中，每支檔案本身就是一個模組。當我們想要使用另一個檔案的程式碼時，必須要透過 export 和 import 來實現。

1. 把程式碼分享出去 - export

如果有一個檔案，裡面有一些程式碼想要讓其他檔案使用，就需要透過 export 來導出這些程式碼。而且可以導出變數、函數、類別，甚至是整個物件。

來看看一個簡單的例子：

export function add(a: number, b: number): number {
    return a + b;
}

export const PI = 3.14159;

在這裡，我們有一個名為 math.ts 的檔案，它包含了一個加法函數 add 和一個常數 PI。這兩個東西都透過 export 導出，這表示我們可以在其他檔案中使用它們。

2. 使用別的程式碼 - import

那如果想要使用另一個檔案中的程式碼時，則需要用 import 導入。這樣就可以在當前檔案中使用那些被導出的變數、函數或類別。

import { add, PI } from './math';

console.log(add(7, 7)); // 14
console.log(PI); // 3.14159

在這個例子，我從 math.ts 模組導入了 add 函數和 PI 常數，然後就可以在 app.ts 裡使用它們了。

3. 預設導出 (Default Export)

除了 export 之外，TypeScript 還支援預設導出 (default export)。當你想要一個模組只有一個主要的導出內容時，可以使用 export default，這樣在導入時不需要使用大括號 {}。

export default function greet(name: string): string {
    return `Hello, ${name}!`;
}

在這裡，我們預設導出了 greet 函數。要在其他檔案中使用它，就可以這樣寫：

import greet from './greet';

console.log(greet('Annie')); // Hello, Annie!

注意，這次沒有使用大括號 {}，因為 greet 是預設導出。

4. 重命名導出和導入

有時候，為了避免命名衝突或讓程式碼更具可讀性，則可以在導入和導出時進行重新命名。在大專案中尤其方便實用。

export function add(a: number, b: number): number {
    return a + b;
}

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

現在如果想要把 add 函數重命名為 sum，在引用的檔案裡則可以這樣寫：

import { add as sum, subtract } from './math';

console.log(sum(6, 3)); // 9
console.log(subtract(6, 3)); // 3

我們可以使用 as 關鍵字將 add 函數重命名為 sum，這樣使用時就可以更符合語意需求。

5. 匯入整個模組

有時候，我們可能想要匯入模組中的所有內容，而不想一個一個列出。這時可以使用 * as 來導入整個模組，然後在需要時使用模組名稱作為前綴。

import * as MathUtils from './math';

console.log(MathUtils.add(6, 6)); // 12
console.log(MathUtils.subtract(8, 3)); // 5

在這裡，我們匯入了 math.ts 檔案中的所有導出內容，並且可以透過 MathUtils 這個名稱來訪問 add 和 subtract。

結語

TypeScript 的模組系統讓我們可以輕鬆地將程式碼分割成更小的部分，並且能夠有效地管理和使用它們。透過 export 和 import，我們可以共享功能並在不同檔案之間輕鬆傳遞資料。這不僅讓程式碼更具結構性，也提高了開發的可維護性。無論是處理大型專案還是進行團隊合作，模組系統都是一個不可或缺的工具。