TypeScript 的模块系统

TypeScript 的模块系统基于 ECMAScript 模块（ES Module）标准，同时兼容 CommonJS、AMD 等模块系统。以下是关键点的分步解释：

1. 模块语法

TypeScript 使用 import 和 export 关键字管理模块：

// 导出
export const name = "TypeScript";
export function greet() { /* ... */ }
export default class MyClass { /* ... */ }

// 导入
import MyClass, { name, greet } from "./my-module";

2. 模块类型支持

TypeScript 支持多种模块格式，通过 tsconfig.json 的 module 字段配置：

{
  "compilerOptions": {
    "module": "ES2020", // 可选值：CommonJS, AMD, UMD, System, ESNext 等
  }
}

• ES Modules (ESM)：现代浏览器/Node.js（需 .mjs 或 "type": "module"）。
• CommonJS：Node.js 传统模块（.js 文件默认）。

3. 模块解析策略

• 相对路径：./module 或 ../module。
• 非相对路径：通过 baseUrl 和 paths 配置解析：

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@utils/*": ["utils/*"]
    }
  }
}

import { logger } from "@utils/logger"; // 解析为 ./src/utils/logger.ts

4. 默认导出与命名导出

• 默认导出（单个导出）：

export default function() { /* ... */ }
import myFunc from "./module";

• 命名导出（多个导出）：

export const pi = 3.14;
import { pi } from "./math";

5. 动态导入

使用 import() 动态加载模块（返回 Promise）：

async function loadModule() {
  const { myFunction } = await import("./my-module");
  myFunction();
}

6. 与 CommonJS 互操作

TypeScript 允许导入 CommonJS 模块：

import fs = require("fs"); // CommonJS 语法
// 或启用 esModuleInterop 后：
import fs from "fs"; // 更简洁的语法

在 tsconfig.json 中启用 esModuleInterop：

{
  "compilerOptions": {
    "esModuleInterop": true
  }
}

7. 模块声明文件（.d.ts）

为无类型模块编写类型声明：

// my-module.d.ts
declare module "my-module" {
  export function doSomething(): void;
}

8. 模块 vs 命名空间

• 模块（推荐）：基于文件作用域，避免全局污染。
• 命名空间（旧用法）：

namespace MyLib {
  export function helper() { /* ... */ }
}
MyLib.helper();

9. 模块最佳实践

1. 使用 ES Modules 语法，除非目标环境明确需要其他格式。
2. 避免混合 默认导出和命名导出。
3. 启用 esModuleInterop
4. 明确导出类型：

export type { User } from "./models";

通过合理配置和使用模块系统，TypeScript 可以有效管理代码结构，支持现代模块化开发需求。