TypeScript 的模組
本文將説明 TypeScript 中的模組。
YouTube Video
TypeScript 的模組
TypeScript 的模組是增強程式碼重用性和可維護性的關鍵功能。與 JavaScript 相似，TypeScript 也基於 ECMAScript 2015（ES6）的模組系統，但其主要特點在於能夠利用 TypeScript 的型別系統。
什麼是模組？
模組是一種將相關代碼分組到單一單元的系統，可以在其他文件中導入和重用。在 TypeScript 中，每個文件會創建一個作用域來封裝代碼，防止其影響其他文件。這有助於避免代碼衝突並使維護更容易。
內部模組與外部模組
- 內部模組（命名空間）：TypeScript 1.5 及更早版本中使用的一種模組定義方式，現在不推薦使用。現在被視為“命名空間”。
- 外部模組：目前的標準，基於 ES6 模組系統。此部分主要說明外部模組。
如何導出模組
創建模組時，必須導出才能讓外部訪問。在 TypeScript 中，可以使用 export 關鍵字來導出變數、函數、類等。主要有兩種類型的導出方式。
具名導出
用於多個導出，允許導入端選擇並使用特定的項目。
1// mathUtils.ts
2export const pi: number = 3.14159;
3
4export function add(x: number, y: number): number {
5 return x + y;
6}
7
8export function subtract(x: number, y: number): number {
9 return x - y;
10}默認導出
用於希望整個模組只有一個默認導出的情況。默認導出沒有導出的名稱，允許導入端用任何名稱接收。
1// calculator.ts
2export default class Calculator {
3 add(x: number, y: number): number {
4 return x + y;
5 }
6
7 subtract(x: number, y: number): number {
8 return x - y;
9 }
10}如何匯入模組
要使用模組，可以使用 import 關鍵字從模組中匯入值、函式、類別等內容。
具名匯入
當從具名匯出中匯入特定元素時，使用大括號 {}。
1// main.ts
2import { pi, add, subtract } from './mathUtils';
3
4console.log(`Value of pi: ${pi}`);
5console.log(`Addition: ${add(10, 5)}`);
6console.log(`Subtraction: ${subtract(10, 5)}`);預設匯入
當匯入預設匯出時，可以使用任意名稱接收。
1// main.ts
2import Calculator from './calculator';
3
4const calculator = new Calculator();
5console.log(`Addition: ${calculator.add(10, 5)}`);
6console.log(`Subtraction: ${calculator.subtract(10, 5)}`);匯入別名
為避免名稱衝突或縮短長名稱，可以使用別名進行匯入。
1// main.ts
2import { add as addition, subtract as subtraction } from './mathUtils';
3
4console.log(`Addition: ${addition(10, 5)}`);
5console.log(`Subtraction: ${subtraction(10, 5)}`);模組與命名空間的差異
命名空間（namespace）是早期 TypeScript 用於組織程式碼的內部模組結構。然而，現在推薦使用 ES6 模組，命名空間已較少必要。
命名空間可以在同一檔案內或跨多個檔案定義，但由於它可全域展開，管理相依性可能會變得困難。相對之下，模組每個檔案都有獨立作用域且相依性明確，使其成為更現代且安全的方法。
1// Example of a namespace
2namespace Geometry {
3 export function calculateArea(radius: number): number {
4 return Math.PI * radius * radius;
5 }
6}
7
8// Can be used directly without importing the module (not recommended)
9const area: number = Geometry.calculateArea(5);
10console.log(`Area: ${area}`);TypeScript 模組解析
在 TypeScript 中，模組解析有兩種策略。
- Node 模組解析：Node.js 環境中使用的標準解析方法，透過在
node_modules資料夾中搜尋模組進行解析。 - 經典模組解析：TypeScript 的自有解析方式，執行更具彈性的搜尋，但如今已不常使用。
通常使用 Node 模組解析，並在未於設定檔中特別指定時為預設啟用。
實例範例
最後，展示了一個使用模組實現並重複使用計算函式的範例。
mathUtils.ts
1export const pi: number = 3.14159;
2
3export function multiply(x: number, y: number): number {
4 return x * y;
5}
6
7export function divide(x: number, y: number): number {
8 if (y === 0) {
9 throw new Error("Cannot divide by zero");
10 }
11 return x / y;
12}- 此檔案定義了數學實用函數，並提供可重複使用的基本算術運算。
calculator.ts
1import { multiply, divide } from './mathUtils';
2
3export default class Calculator {
4 multiplyNumbers(x: number, y: number): number {
5 return multiply(x, y);
6 }
7
8 divideNumbers(x: number, y: number): number {
9 return divide(x, y);
10 }
11}- 此檔案定義並導出了
Calculator類別。它使用從mathUtils匯入的函數，在內部封裝計算機功能。
main.ts
1import Calculator from './calculator';
2
3const calculator = new Calculator();
4
5const result1: number = calculator.multiplyNumbers(10, 5);
6console.log(`Multiplication: ${result1}`);
7
8const result2: number = calculator.divideNumbers(10, 2);
9console.log(`Division: ${result2}`);- 此檔案是應用程式的入口點。它建立一個
Calculator類別的實例，執行乘法和除法，並將結果輸出到主控台。
總結
TypeScript 的模組系統是組織程式碼、提升重複使用性及增加可維護性的強大工具。推薦基於 ES6 模組的外部模組使用，並通過 export 和 import 關鍵字輕鬆實現模組的匯出與匯入。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。