模块与命名空间的比较

模块与命名空间的基本概念

TypeScript 中的模块和命名空间都是用于组织代码的工具，但它们的用途和实现方式有所不同。模块是现代 JavaScript 和 TypeScript 中组织代码的主要方式，而命名空间则是 TypeScript 早期提供的一种代码组织方式。

模块通过 import 和 export 关键字来导入和导出功能，每个模块都有自己的作用域。命名空间则通过 namespace 关键字来定义，主要用于在全局作用域内组织代码。

// 模块示例
// math.ts
export function add(a: number, b: number): number {
  return a + b
}

// app.ts
import { add } from './math'
console.log(add(1, 2))

// 命名空间示例
namespace MathUtils {
  export function add(a: number, b: number): number {
    return a + b
  }
}

console.log(MathUtils.add(1, 2))

模块系统的特点

TypeScript 的模块系统遵循 ES 模块标准，具有以下特点：

1. 文件即模块：每个 .ts 文件都是一个独立的模块
2. 显式导出：必须使用 export 关键字显式导出才能在其他模块中使用
3. 多种导入方式：支持命名导入、默认导入和命名空间导入
4. 静态分析：模块依赖关系可以在编译时确定

模块支持多种导出方式：

// 命名导出
export const PI = 3.14
export function circleArea(r: number) {
  return PI * r * r
}

// 默认导出
export default class Calculator {
  // ...
}

// 重新导出
export { PI as PiValue } from './constants'

命名空间的特点

命名空间是 TypeScript 特有的功能，主要用于：

1. 避免全局污染：将相关代码组织在一个命名空间内
2. 逻辑分组：将相关的功能组织在一起
3. 兼容性：在非模块化环境中使用

命名空间可以嵌套，并且支持跨文件分割：

// shapes.ts
namespace Shapes {
  export namespace Polygons {
    export class Triangle {}
    export class Square {}
  }
}

// app.ts
/// <reference path="shapes.ts" />
const tri = new Shapes.Polygons.Triangle()

模块与命名空间的主要区别

1. 作用域：

   • 模块具有自己的作用域，需要显式导入导出
   • 命名空间在全局作用域中，通过命名空间名称访问

2. 文件组织：

   • 模块通常一个文件一个模块
   • 命名空间可以跨多个文件

3. 依赖加载：

   • 模块依赖由模块加载器处理
   • 命名空间依赖需要手动管理（如使用 /// <reference>）

4. 现代性：

   • 模块是 ES6 标准的一部分
   • 命名空间是 TypeScript 特有的功能

何时使用模块

模块是现代 TypeScript 项目的首选方式，特别适合以下场景：

1. 大型项目：需要良好的代码组织和明确的依赖关系
2. 与前端框架配合：如 React、Vue、Angular 等
3. 需要 tree-shaking：模块可以被打包工具优化

// 现代模块化组件示例
// Button.tsx
import React from 'react'

interface ButtonProps {
  onClick: () => void
  children: React.ReactNode
}

export function Button({ onClick, children }: ButtonProps) {
  return <button onClick={onClick}>{children}</button>
}

// App.tsx
import { Button } from './Button'

function App() {
  return <Button onClick={() => console.log('Clicked')}>Click me</Button>
}

何时使用命名空间

命名空间在以下情况下可能更有用：

1. 遗留代码维护：需要与旧的 TypeScript 代码兼容
2. 类型定义文件：在 .d.ts 文件中组织类型
3. 简单的网页脚本：不需要复杂构建工具的小项目

// 在类型定义中使用命名空间
declare namespace Express {
  interface Request {
    user?: {
      id: string
      name: string
    }
  }
}

// 简单的网页脚本
namespace MyApp {
  export function init() {
    document.getElementById('btn')?.addEventListener('click', handleClick)
  }

  function handleClick() {
    console.log('Button clicked')
  }
}

MyApp.init()

模块与命名空间的混合使用

在某些情况下，可以混合使用模块和命名空间：

// geometry.ts
export namespace Geometry {
  export class Point {
    constructor(public x: number, public y: number) {}
  }

  export function distance(p1: Point, p2: Point) {
    return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2))
  }
}

// app.ts
import { Geometry } from './geometry'

const p1 = new Geometry.Point(0, 0)
const p2 = new Geometry.Point(3, 4)
console.log(Geometry.distance(p1, p2))

模块解析策略

TypeScript 支持不同的模块解析策略：

1. Classic：TypeScript 传统的解析方式
2. Node：模拟 Node.js 的模块解析方式

可以在 tsconfig.json 中配置：

{
  "compilerOptions": {
    "moduleResolution": "node"
  }
}

模块解析会尝试以下扩展名：

• .ts
• .tsx
• .d.ts
• .js
• .jsx

命名空间的实现细节

命名空间在编译为 JavaScript 时会变成 IIFE（立即调用函数表达式）：

namespace MyNamespace {
  export const value = 42
  export function doSomething() {
    console.log(value)
  }
}

编译为：

var MyNamespace
;(function (MyNamespace) {
  MyNamespace.value = 42
  function doSomething() {
    console.log(MyNamespace.value)
  }
  MyNamespace.doSomething = doSomething
})(MyNamespace || (MyNamespace = {}))

模块的代码生成

TypeScript 可以根据配置生成不同的模块代码：

{
  "compilerOptions": {
    "module": "es2015" // 也可以是 commonjs, amd, umd 等
  }
}

ES 模块：

// math.ts
export function square(x: number) {
  return x * x
}

// 编译为
export function square(x) {
  return x * x
}

CommonJS 模块：

// 编译为
exports.square = function (x) {
  return x * x
}

模块与命名空间的性能考虑

1. 模块：

   • 现代打包工具可以优化模块（tree-shaking）
   • 支持按需加载
   • 静态分析有助于性能优化

2. 命名空间：

   • 所有代码都在一个作用域中
   • 无法进行 tree-shaking
   • 适合小型应用，大型应用可能导致性能问题

在大型项目中的实践建议

对于现代 TypeScript 项目：

1. 优先使用模块：模块是标准，有更好的工具支持
2. 限制命名空间的使用：仅在类型定义或特殊情况下使用
3. 一致的代码风格：整个项目统一使用模块或命名空间
4. 利用模块的代码分割：提高应用加载性能

// 推荐的项目结构
// components/
//   Button/
//     index.ts
//     Button.tsx
//     styles.css
//     types.ts
// utils/
//   math.ts
//   string.ts

常见问题与解决方案

1. 命名冲突：

   • 模块：自然避免，因为每个模块有自己的作用域
   • 命名空间：需要通过嵌套命名空间解决

2. 循环依赖：

   • 模块：需要小心设计代码结构
   • 命名空间：较少出现，因为都在全局作用域

3. 类型扩展：

   • 模块：使用声明合并
   • 命名空间：直接在命名空间内添加

// 模块中的声明合并
// original.ts
export interface User {
  id: string
  name: string
}

// extension.ts
import { User } from './original'

declare module './original' {
  interface User {
    email?: string
  }
}

const user: User = {
  id: '1',
  name: 'Alice',
  email: 'alice@example.com'
}