在 TypeScript 中，命名空间（Namespace）和模块（Module）是两种不同的代码组织方式，用于组织和管理代码结构，避免命名冲突和提高可维护性。虽然它们都可以将代码划分为不同的逻辑单元，但在使用上有一些区别。
1. 命名空间（Namespace）
命名空间是一种将代码逻辑分组的方式，通常用于将相关功能组织在一个全局对象下，防止全局作用域中的变量冲突。命名空间在 TypeScript 中使用 namespace 关键字定义。
特点：
- 内联声明：命名空间中的代码是内联的，意味着它们通常会在一个文件内进行定义，甚至可以在同一个文件的不同部分访问。
- 全局作用域：命名空间的内容是全局可见的，但它通过组织成一个命名空间来避免命名冲突。
- 通常适用于小型项目：对于较小的项目或者需要避免模块化工具时，命名空间较为适用。
示例代码：
namespace MathOperations {export function add(a: number, b: number): number {return a + b;}export function subtract(a: number, b: number): number {return a - b;}
}// 使用命名空间中的方法
let result = MathOperations.add(5, 3);
console.log(result); // 输出 8
解释：
- 这里我们定义了一个
MathOperations命名空间，并在其中包含了两个导出的函数add和subtract。 export关键字是必须的，它让命名空间中的成员可以在外部访问。- 在外部使用时，只需要通过
MathOperations.add()来调用命名空间中的方法。
命名空间的优势：
- 适合较小项目，或者不使用模块化系统的场景。
- 通过命名空间可以避免全局作用域的命名冲突。
命名空间的劣势：
- 在大型项目中，代码可能变得难以维护，因为命名空间可能变得很庞大。
- 不能进行按需加载，所有代码都需要在文件加载时一起加载。
2. 模块（Module）
模块是 TypeScript 和 ES6 引入的标准化的代码组织方式，模块化是为了让代码更加可维护、可重用以及可按需加载。模块使用 import 和 export 关键字来组织代码，每个文件都视为一个独立的模块，模块之间可以进行导入和导出。
特点：
- 文件级别作用域：每个模块都有自己的作用域，模块外的变量不会影响模块内部的代码。
- 显式导入导出：模块中的代码必须显式导出才能被其他模块访问，而使用其他模块中的内容时必须通过
import明确引入。 - 适用于大型项目：模块化通常适用于大规模应用开发，具有更高的可维护性和扩展性。
- 支持按需加载：支持现代的构建工具（如 Webpack）进行按需加载。
示例代码：
假设我们有两个文件 math.ts 和 app.ts。
math.ts：
// 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：
// app.ts
import { add, subtract } from './math';let sum = add(5, 3);
console.log(sum); // 输出 8let diff = subtract(5, 3);
console.log(diff); // 输出 2
解释：
- 在
math.ts文件中，我们使用export导出了add和subtract函数，这样它们就可以被其他文件导入。 - 在
app.ts中，使用import引入了add和subtract函数，并使用它们进行计算。 - 每个文件本身都是一个模块，它们有自己的作用域，不会干扰其他文件中的代码。
模块的优势：
- 清晰的代码组织：每个文件都是独立的模块，代码组织更加清晰。
- 按需加载：模块支持按需加载，可以通过构建工具进行优化，减少文件大小。
- 避免全局污染：模块内的变量不会污染全局作用域，避免了命名冲突。
- 适合大型应用：模块化结构非常适合大型项目，增强了代码的可维护性和可复用性。
模块的劣势：
- 如果不合理设计模块依赖关系，可能导致循环依赖的问题。
- 需要现代的模块化工具和构建系统，如 Webpack、Rollup 等。
3. 命名空间与模块的区别
| 特性 | 命名空间 (Namespace) | 模块 (Module) |
|---|---|---|
| 作用域 | 全局作用域，命名空间通过组织代码避免冲突。 | 每个文件都有自己的局部作用域。 |
| 代码组织方式 | 将相关功能集中到同一个命名空间下，文件不一定需要拆分。 | 每个文件是一个独立的模块，代码必须拆分成多个文件。 |
| 导入导出方式 | 使用 export 导出，文件间没有显式的 import。 | 使用 import 和 export 显式导入导出。 |
| 使用场景 | 适用于较小的项目或不需要模块化工具的简单应用。 | 适用于大型项目，支持模块化构建和按需加载。 |
| 循环依赖 | 命名空间之间不能有循环依赖。 | 支持循环依赖，但要小心使用。 |
| 全局污染 | 命名空间成员仍然属于全局，可能会影响其他部分代码。 | 模块内部变量仅在该模块内有效，避免了全局污染。 |
4. 实际项目中的使用示例
假设我们有一个简单的电商应用，模块化可以帮助我们组织不同的功能，如用户管理、商品管理、订单管理等。
文件结构：
/src/modulesuser.tsproduct.tsorder.ts/app.ts
user.ts（用户管理模块）：
// user.ts
export function createUser(name: string, age: number) {return { name, age };
}
product.ts（商品管理模块）：
// product.ts
export function createProduct(name: string, price: number) {return { name, price };
}
order.ts（订单管理模块）：
// order.ts
import { createUser } from './user';
import { createProduct } from './product';export function createOrder(userName: string, userAge: number, productName: string, productPrice: number) {const user = createUser(userName, userAge);const product = createProduct(productName, productPrice);return { user, product, status: "Pending" };
}
app.ts（应用入口）：
// app.ts
import { createOrder } from './modules/order';const order = createOrder("Alice", 30, "Laptop", 1000);
console.log(order);
解释：
user.ts、product.ts和order.ts都是独立的模块，分别处理用户、商品和订单的逻辑。app.ts是应用的入口，负责引入并使用这些模块。- 每个模块的代码都隔离在自己的作用域内，不会污染全局作用域，模块之间的依赖关系通过
import和export显式建立。
结论
- 命名空间：适用于较小的项目，能够将相关的功能组织在一起，避免命名冲突，但在大型项目中可能变得不够灵活。
- 模块：适用于大型项目，通过文件级作用域和显式导入导出机制提供了更好的模块化支持，能够更好地组织代码、支持按需加载并避免全局污染。
根据项目的大小、复杂度和构建工具的使用情况，你可以选择适合的组织方式。在现代开发中，模块化已经成为主流，特别是在使用现代构建工具时，模块化能够帮助你更高效地开发和维护项目。
