# 第7章：模块与命名空间

## ES6 模块语法（import/export）

### 1. 模块的基本概念
在 TypeScript 中，模块是组织和封装代码的重要方式。ES6 模块语法（`import` 和 `export`）是 JavaScript 的官方标准，TypeScript 完全支持这一语法。模块允许你将代码分割成多个文件，每个文件可以导出（`export`）部分功能，供其他文件导入（`import`）使用。

### 2. 导出（Export）
#### 2.1 命名导出（Named Exports）
命名导出允许你从一个模块中导出多个值，每个值都有一个名称。

```typescript
// math.ts
export const PI = 3.14159;
export function add(a: number, b: number): number {
    return a + b;
}

2.2 默认导出（Default Export）

每个模块可以有一个默认导出，通常用于导出模块的主要功能。

// calculator.ts
export default class Calculator {
    add(a: number, b: number): number {
        return a + b;
    }
}

3. 导入（Import）

3.1 导入命名导出

使用 import { ... } from 'module' 语法导入命名导出。

// app.ts
import { PI, add } from './math';
console.log(PI); // 3.14159
console.log(add(2, 3)); // 5

3.2 导入默认导出

默认导出可以使用任意名称导入。

// app.ts
import Calculator from './calculator';
const calc = new Calculator();
console.log(calc.add(2, 3)); // 5

3.3 导入所有导出

使用 import * as alias from 'module' 导入模块的所有导出。

// app.ts
import * as math from './math';
console.log(math.PI); // 3.14159
console.log(math.add(2, 3)); // 5

4. 重新导出（Re-exporting）

模块可以重新导出其他模块的内容，通常用于组织代码或创建库的入口文件。

// utils.ts
export { PI, add } from './math';
export { default as Calculator } from './calculator';

5. 动态导入（Dynamic Imports）

动态导入允许你在运行时按需加载模块，返回一个 Promise。

// app.ts
async function loadMath() {
    const math = await import('./math');
    console.log(math.add(2, 3)); // 5
}
loadMath();

6. 模块的兼容性

TypeScript 支持多种模块系统（如 CommonJS、AMD、UMD 等），但推荐使用 ES6 模块语法。在 tsconfig.json 中，可以通过 module 选项指定模块系统：

{
    "compilerOptions": {
        "module": "ES6" // 或 "CommonJS"、"AMD" 等
    }
}

7. 总结

ES6 模块语法是 TypeScript 中组织代码的核心方式。通过 export 和 import，你可以清晰地定义模块的边界，提高代码的可维护性和复用性。动态导入和重新导出进一步增强了模块的灵活性。

Last Updated::