面试题：TypeScript模块化中如何正确使用命名空间和模块

命名空间（namespace）和模块（module）的区别

作用域
- 命名空间：主要用于组织代码，防止命名冲突，它在全局作用域下创建一个新的作用域。命名空间内部的声明在该命名空间内有效，不同命名空间中可以有相同名称的声明。例如，在一个大型JavaScript项目中，可能有多个库定义了Utils对象，通过命名空间可以将它们区分开。
- 模块：模块有自己独立的作用域，模块内部定义的变量、函数、类等默认在外部不可见，通过export关键字可以将需要暴露的内容导出，其他模块通过import导入使用。模块之间相互隔离，每个模块都有自己独立的作用域环境。
文件组织和加载
- 命名空间：通常在一个文件中定义多个命名空间，或者在多个文件中通过/// <reference path="..."/>语法相互引用，适用于传统的JavaScript开发方式，所有代码在页面加载时一同加载。例如，在一个小型的单页应用中，使用命名空间组织代码，所有相关代码都在一个HTML页面加载时引入。
- 模块：每个模块通常是一个独立的文件，现代JavaScript开发中，模块可以通过ES6模块系统或其他模块加载器（如CommonJS、AMD等）按需加载。例如，在一个大型的Node.js项目中，不同功能模块可以根据需求被加载，提高代码的加载效率和可维护性。
编译和运行环境
- 命名空间：在编译时，命名空间相关代码会被合并到全局作用域（或者目标作用域）中，适用于不支持模块的运行环境，如一些较旧的浏览器环境。
- 模块：ES6模块在现代浏览器和Node.js环境中原生支持，编译后会保留模块的结构和依赖关系，运行时按模块规则加载和执行。

在工程化项目中的使用场景

使用命名空间的场景
- 小型项目或库：当项目规模较小，不需要复杂的模块加载机制，且希望在全局作用域下组织代码以方便使用时，可以使用命名空间。例如，开发一个小型的JavaScript库，提供一些工具函数，使用命名空间来组织这些函数，用户在引入库后可以直接在全局访问相关功能。
- 兼容性需求：如果项目需要兼容不支持模块的旧环境，命名空间是一个不错的选择。比如一些遗留的浏览器项目，无法使用ES6模块，通过命名空间组织代码能满足需求。
使用模块的场景
- 大型项目：在大型的Web应用或Node.js项目中，模块能更好地实现代码的模块化、封装和复用。不同功能模块可以独立开发、维护和测试，提高开发效率。例如，在一个电商项目中，将用户模块、商品模块、订单模块等分别定义为独立的模块，方便团队协作开发。
- 按需加载：当需要按需加载代码，优化页面性能时，模块系统能很好地满足这一需求。例如，在单页应用中，某些功能模块只有在用户操作到特定页面时才需要加载，使用模块系统可以轻松实现这种按需加载。

使用export和import语句组织模块代码的示例

假设我们有两个文件，mathUtils.ts和main.ts。

mathUtils.ts

// 定义加法函数
export function add(a: number, b: number): number {
    return a + b;
}

// 定义减法函数
export function subtract(a: number, b: number): number {
    return a - b;
}

// 定义一个常量
export const PI = 3.14159;

main.ts

// 导入mathUtils模块中的add和subtract函数，以及PI常量
import { add, subtract, PI } from './mathUtils';

// 使用导入的函数和常量
const result1 = add(5, 3);
const result2 = subtract(10, 4);
console.log(`5 + 3 = ${result1}`);
console.log(`10 - 4 = ${result2}`);
console.log(`PI的值是: ${PI}`);

在这个示例中，mathUtils.ts通过export导出了函数和常量，main.ts通过import从mathUtils.ts导入需要使用的内容，并在main.ts中使用这些导入的内容。

星途面试题库

面试题：TypeScript模块化中如何正确使用命名空间和模块

知识考点

面试题答案

命名空间（namespace）和模块（module）的区别

在工程化项目中的使用场景

使用export和import语句组织模块代码的示例