TypeScript 模块
最后修改时间：2025年3月3日
TypeScript 中的模块将代码组织成可重用、可维护的单元。它们使用 import 和 export 语句在文件之间共享代码。本教程将通过实际示例深入探讨模块语法、默认导出和命名空间。
基本模块语法
模块允许导出和导入变量、函数和类。此示例演示了基本模块用法。
mathUtils.ts
export function add(a: number, b: number): number {
return a + b;
}
export function subtract(a: number, b: number): number {
return a - b;
}
main.ts
import { add, subtract } from './mathUtils';
console.log(add(10, 5)); // Output: 15
console.log(subtract(10, 5)); // Output: 5
mathUtils 模块导出了两个函数。main 模块导入并使用它们。
默认导出
一个模块可以有一个默认导出。默认导出简化了导入。
logger.ts
export default function log(message: string): void {
console.log(`[LOG]: ${message}`);
}
main.ts
import log from './logger';
log("This is a log message."); // Output: [LOG]: This is a log message.
默认导出无需花括号即可导入，并且可以具有任何名称。
命名空间导入
命名空间导入将多个导出分组到一个名称下。
mathUtils.ts
export function add(a: number, b: number): number {
return a + b;
}
export function subtract(a: number, b: number): number {
return a - b;
}
main.ts
import * as MathUtils from './mathUtils'; console.log(MathUtils.add(10, 5)); // Output: 15 console.log(MathUtils.subtract(10, 5)); // Output: 5
命名空间导入对于组织相关函数很有用。
重新导出模块
模块可以重新导出其他模块，以创建单一入口点。
mathUtils.ts
export function add(a: number, b: number): number {
return a + b;
}
export function subtract(a: number, b: number): number {
return a - b;
}
index.ts
export { add, subtract } from './mathUtils';
main.ts
import { add, subtract } from './index';
console.log(add(10, 5)); // Output: 15
console.log(subtract(10, 5)); // Output: 5
通过在一个文件中整合导出，重新导出可以简化导入。
动态导入
动态导入在运行时异步加载模块。
mathUtils.ts
export function add(a: number, b: number): number {
return a + b;
}
main.ts
async function loadModule() {
const mathUtils = await import('./mathUtils');
console.log(mathUtils.add(10, 5)); // Output: 15
}
loadModule();
动态导入对于代码拆分和延迟加载很有用。
命名空间
命名空间对相关代码进行分组，并避免全局作用域污染。
mathUtils.ts
namespace MathUtils {
export function add(a: number, b: number): number {
return a + b;
}
}
export { MathUtils };
main.ts
import { MathUtils } from './mathUtils';
console.log(MathUtils.add(10, 5)); // Output: 15
命名空间是组织代码的模块替代方案。
最佳实践
- 使用模块：对于现代应用程序，优先使用模块而不是命名空间
- 单一职责：让模块专注于一项任务
- 默认导出：对单一用途模块使用默认导出
- 动态导入：使用动态导入来优化性能
- 重新导出：在
index.ts文件中整合导出
来源
本教程通过实际示例介绍了 TypeScript 模块。实施这些模式可以编写模块化、可维护的代码。