TypeScript - 模組：初學者指南
你好，有志於成為程序員的你！今天，我們將踏上一段令人興奮的旅程，探索 TypeScript 模組的世界。別擔心如果你是編程新手；我會成為你的友好導遊，一步步解釋一切。那麼，讓我們開始吧！
模組是什麼？
在深入細節之前，讓我們先了解模組是什麼。想像你正在建造一座巨大的樂高結構。你可能不會一氣呵成地建造一切，而是分別建造更小的部分，然後將它們組合起來。這正是程序設計中模組的作用！
模組幫助我們將代碼組織成可管理、可重用的部分。它們讓我們能夠將代碼拆分到多個文件中，使其更易於維護和理解。在 TypeScript 中，我們有两种类型的模組：內部模組和外部模組。
內部模組
內部模組，也稱為命名空間，是 TypeScript 組織代碼的原始方式。雖然現在它們較不常見，但理解它們可能會有所幫助。
創建內部模組
讓我們創建我們的第一个內部模組：
namespace MathOperations {
export function add(x: number, y: number): number {
return x + y;
}
export function subtract(x: number, y: number): number {
return x - y;
}
}
console.log(MathOperations.add(5, 3)); // 輸出: 8
console.log(MathOperations.subtract(10, 4)); // 輸出: 6在這個例子中，我們創建了一個名為 MathOperations 的命名空間。在它里面，我們有两个函數：add 和 subtract。export 間鍵讓這些函數可以在命名空間外部被訪問。
使用內部模組
要使用我們命名空間中的函數，我們需要加上命名空間的名稱作為前綴：
let sum = MathOperations.add(10, 20);
console.log(sum); // 輸出: 30嵌套命名空間
我們甚至可以在命名空間內嵌套其他命名空間：
namespace Geometry {
export namespace Circle {
export function calculateArea(radius: number): number {
return Math.PI * radius * radius;
}
}
}
console.log(Geometry.Circle.calculateArea(5)); // 輸出: 78.53981633974483在這裡，我們有一個在 Geometry 命名空間內嵌套的 Circle 命名空間。
外部模組
外部模組是更現代且被推薦的 TypeScript 代碼組織方式。它們與 ECMAScript 2015（ES6）模組保持一致。
創建外部模組
讓我們創建一個名為 mathOperations.ts 的文件：
// mathOperations.ts
export function add(x: number, y: number): number {
return x + y;
}
export function multiply(x: number, y: number): number {
return x * y;
}在這個文件中，我們輸出了两个函數：add 和 multiply。
引入和使用外部模組
現在，讓我們創建另一個文件來使用這些函數：
// app.ts
import { add, multiply } from './mathOperations';
console.log(add(5, 3)); // 輸出: 8
console.log(multiply(4, 2)); // 輸出: 8在這裡，我們從我們的 mathOperations 模組中引入了特定的函數。
默認輸出
有時候，你可能想要從模組中輸出一個主要的事物。這時，默認輸出就派上用場了：
// greet.ts
export default function greet(name: string): string {
return `Hello, ${name}!`;
}引入默認輸出：
// app.ts
import greet from './greet';
console.log(greet('Alice')); // 輸出: Hello, Alice!重命名引入
如果你想要避免命名冲突，你也可以重命名引入：
import { add as sum } from './mathOperations';
console.log(sum(5, 3)); // 輸出: 8為什麼使用模組？
- 組織：模組幫助你保持代碼的組織性和可維護性。
- 封裝：它們提供了一種方法來隱藏代碼的复杂性。
- 重用性：你可以輕鬆地在應用的不同部分重用代碼。
- 命名空間：它們幫助避免代碼中的命名冲突。
模組解析策略
TypeScript 使用不同的策略來解析模組：
| 策略 | 描述 |
|---|---|
| 传統 | 使用一個簡單的算法來尋找模組 |
| Node | 模仿 Node.js 的模組解析機制 |
| 路徑映射 | 讓你可以指定 TypeScript 如何解析引入 |
結論
恭喜你！你剛剛踏出了進入 TypeScript 模組世界的第一步。記住，就像學騎自行車一樣，起初可能會有些晃動，但隨著練習，你會很快馳騁。
模組是你編程工具包中的強大工具。它們幫助你寫出乾淨、有組織且可重用的代碼。隨著你繼續在 TypeScript 的旅程上前行，你會越來越多地使用模組。
繼續編碼，持續學習，最重要的是，玩得開心！誰知道呢？下一個偉大的應用程序可能只差一個模組。快樂編碼！
Credits: Image by storyset