面试题：TypeScript 中命名空间与模块在大型项目中的差异

Question

在大型 TypeScript 项目里，命名空间和模块都用于组织代码结构，请阐述它们在作用域、导入导出方式以及使用场景上有哪些主要差异？

Answer 1

作用域

• 命名空间：
  • 命名空间内声明的变量、函数、类等在命名空间内部形成一个局部作用域。不同命名空间之间可以有相同名字的标识符，只要它们不在同一个命名空间中，就不会冲突。例如：

namespace A {
  const name = 'A 中的 name';
}
namespace B {
  const name = 'B 中的 name';
}

• 命名空间在全局作用域下工作，会污染全局命名空间。
• 模块：
  • 模块具有自己独立的作用域，模块内部声明的变量、函数、类等在外部默认是不可见的。只有通过导出才能让外部访问。例如：

// module.ts
const privateVar = '私有变量';
export const publicVar = '公有变量';

• 模块不会污染全局命名空间，极大地减少了命名冲突的可能性。

导入导出方式

• 命名空间：
  • 导出：在命名空间内部定义的内容，通过在定义前加上export关键字来导出。例如：

namespace MathUtils {
  export function add(a: number, b: number): number {
    return a + b;
  }
}

• 导入：使用/// <reference>指令来引用其他命名空间文件（通常用于声明文件或内部模块间引用）。例如：

/// <reference path="mathUtils.ts" />
console.log(MathUtils.add(2, 3));

• 在现代 TypeScript 开发中，也可以使用import语句来导入命名空间，前提是命名空间被导出。例如：

// main.ts
import { MathUtils } from './mathUtils';
console.log(MathUtils.add(2, 3));

• 模块：
  • 导出：使用export关键字导出变量、函数、类等。有多种导出方式，如直接导出：

// utils.ts
export function multiply(a: number, b: number): number {
  return a * b;
}

或者先定义后导出：

// utils.ts
function divide(a: number, b: number): number {
  return a / b;
}
export { divide };

• 导入：使用import语句导入模块中的导出内容。例如：

// main.ts
import { multiply } from './utils';
console.log(multiply(2, 3));

也可以整体导入模块：

// main.ts
import * as utils from './utils';
console.log(utils.multiply(2, 3));

使用场景

• 命名空间：
  • 适用于简单的项目或者在项目中需要将相关代码组织在一起，但又不想引入过多模块复杂性的情况。例如，在一个小型库中，将一些工具函数组织在一个命名空间内。
  • 当需要与旧的 JavaScript 代码（没有模块化系统）进行集成时，命名空间可以方便地将相关代码封装在一起，同时仍在全局作用域下工作。
• 模块：
  • 适用于大型项目，尤其是需要进行代码拆分、依赖管理和避免命名冲突的场景。每个模块都可以独立开发、测试和维护。
  • 当使用第三方库时，模块系统能够更好地管理这些库的依赖关系，确保不同库之间的代码不会相互干扰。例如，在一个大型前端应用中，使用import导入 React、Redux 等库的模块。