面试题：TypeScript中模块与命名空间的差异

Question

请详细阐述TypeScript里模块（module）和命名空间（namespace）在定义方式、作用域、使用场景等方面有哪些不同？并分别给出简单的代码示例。

Answer 1

定义方式

• 模块（Module）：在TypeScript中，模块是一个包含导入和导出语句的文件。每个文件都是一个独立的模块。可以使用 export 关键字来导出变量、函数、类等，使用 import 关键字来导入其他模块的内容。 示例代码：

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

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

• 命名空间（Namespace）：命名空间使用 namespace 关键字来定义，它可以将相关的代码组织在一起，避免命名冲突。命名空间可以嵌套定义。 示例代码：

namespace MathUtils {
    export function multiply(a: number, b: number) {
        return a * b;
    }
}
console.log(MathUtils.multiply(2, 3)); 

作用域

• 模块（Module）：模块有自己独立的作用域，模块内定义的变量、函数、类等在外部是不可见的，除非通过 export 导出。不同模块之间通过 import 和 export 进行交互。
• 命名空间（Namespace）：命名空间的作用域是在其定义的范围内，同一文件内不同命名空间之间如果有相同名称的标识符会产生冲突。命名空间可以通过嵌套来组织代码结构，但整体仍在同一个全局作用域下（在ES5及以前，没有模块概念时，命名空间用于组织全局代码）。

使用场景

• 模块（Module）：适用于大型项目中，将不同功能拆分成独立的模块，便于代码的维护、复用和管理。模块之间的依赖关系通过 import 和 export 清晰明确。比如构建一个复杂的前端应用，每个功能模块如用户登录、商品展示等都可以写成独立的模块。
• 命名空间（Namespace）：适用于在一个文件内组织相关代码，避免命名冲突。当项目规模较小，不需要使用模块系统（如在一些简单的脚本项目或者不支持模块的环境中）时，命名空间可以用来组织代码结构。例如，在一个简单的JavaScript库中，将相关的工具函数放在一个命名空间内。