模块（Module）是 TypeScript 中的一种组织代码的方式，它基于 ES6 模块系统，通过 import 和 export 语法进行模块化。模块使得代码可以在多个文件中拆分和复用，避免全局命名冲突，并且提高代码的可维护性和可读性。本文将详细介绍 TypeScript 的模块，并通过示例代码说明每个概念的使用方法和应用场景。

什么是模块

模块是将代码分隔到独立文件或逻辑单元中的一种机制，每个模块都有自己的作用域。模块通过 export 导出成员，通过 import 导入其他模块的成员。

示例

// logger.ts
export function log(message: string): void {
    console.log(message);
}
// app.ts
import { log } from "./logger";
log("This is a log message.");

在上面的例子中，logger.ts 模块导出了 log 函数，而 app.ts 模块通过 import 导入并使用了这个函数。

导出和导入

导出成员

你可以使用 export 关键字导出变量、函数、类和接口等。

示例

// math.ts
export const PI = 3.14;
export function add(a: number, b: number): number {
    return a + b;
}
export class Calculator {
    add(a: number, b: number): number {
        return a + b;
    }
}
export interface MathOperation {
    (a: number, b: number): number;
}

导入成员

你可以使用 import 关键字导入其他模块导出的成员。可以导入整个模块或部分成员。

导入部分成员

// app.ts
import { PI, add, Calculator, MathOperation } from "./math";
console.log(PI); // 3.14
console.log(add(2, 3)); // 5
const calculator = new Calculator();
console.log(calculator.add(5, 7)); // 12

导入整个模块

// app.ts
import * as MathUtils from "./math";
console.log(MathUtils.PI); // 3.14
console.log(MathUtils.add(2, 3)); // 5
const calculator = new MathUtils.Calculator();
console.log(calculator.add(5, 7)); // 12

默认导出

默认导出（Default Export）允许你导出一个模块的单个成员，可以在导入时使用自定义名称。

示例

// logger.ts
export default function log(message: string): void {
    console.log(message);
}
// app.ts
import log from "./logger";
log("This is a default log message.");

重命名导出和导入

你可以在导出和导入时对成员进行重命名，避免命名冲突或使代码更具可读性。

导出时重命名

// math.ts
const PI = 3.14;
const add = (a: number, b: number) => a + b;
export { PI as PiValue, add as addNumbers };

导入时重命名

// app.ts
import { PiValue, addNumbers } from "./math";
console.log(PiValue); // 3.14
console.log(addNumbers(2, 3)); // 5

使用模块配置

在 TypeScript 中，可以通过 tsconfig.json 文件中的 module 选项配置模块的解析方式。常见的模块选项有 CommonJS、ES6、AMD、UMD 等。

示例

{
    "compilerOptions": {
        "module": "ES6",
        "target": "ES6",
        "outDir": "./dist",
        "rootDir": "./src",
        "strict": true
    }
}

动态导入

ES2020 引入了动态导入（Dynamic Import），允许在运行时按需加载模块。TypeScript 支持这一特性，可以使用 import() 语法进行动态导入。

示例

// app.ts
async function loadModule() {
    const { log } = await import("./logger");
    log("This is a dynamically imported log message.");
}
loadModule();

模块解析

TypeScript 使用模块解析策略来确定模块导入路径。主要有两种解析策略：Node 和 Classic。

• Node：基于 Node.js 的模块解析策略，适用于大多数项目。
• Classic：TypeScript 1.6 之前的旧解析策略，较少使用。

示例：配置模块解析策略

{
    "compilerOptions": {
        "moduleResolution": "node",
        "baseUrl": "./",
        "paths": {
            "*": ["node_modules/*"]
        }
    }
}

命名空间与模块

命名空间（Namespace）和模块都是组织代码的方式，但它们有不同的使用场景和特点。

• 命名空间：适用于将代码逻辑分组，通常用于同一个文件或多个文件通过 /// <reference path="..." /> 引用。
• 模块：基于 ES6 模块系统，通过 import 和 export 语法进行模块化，适用于更大的项目和代码分离。

示例：使用模块和命名空间

// utils.ts
export namespace StringUtils {
    export function toUpperCase(str: string): string {
        return str.toUpperCase();
    }
}
export namespace MathUtils {
    export function add(a: number, b: number): number {
        return a + b;
    }
}
// app.ts
import { StringUtils, MathUtils } from "./utils";
console.log(StringUtils.toUpperCase("hello")); // HELLO
console.log(MathUtils.add(2, 3)); // 5

模块的最佳实践

1. 合理命名：使用有意义的模块名称，反映模块的功能和内容。
2. 单一职责：每个模块应只负责一个功能，避免将多个功能混在一个模块中。
3. 按需导入：只导入需要的成员，避免导入整个模块，减小代码体积。
4. 避免循环依赖：避免模块之间的循环依赖，防止潜在的问题和错误。

示例：单一职责和按需导入

// math.ts
export function add(a: number, b: number): number {
    return a + b;
}
export function subtract(a: number, b: number): number {
    return a - b;
}
// app.ts
import { add } from "./math";
console.log(add(5, 3)); // 8

结论

模块是 TypeScript 中的重要特性，提供了灵活且强大的代码组织和分组方式。通过使用模块，可以将代码分离到不同文件中，提高代码的可维护性和可读性。在实际开发中，合理使用模块可以帮助你更好地组织和管理代码，尤其是在大型项目中，模块的作用更加显著。