面试题：TypeScript 中名字空间与模块在作用域方面的区别

Question

请阐述 TypeScript 里名字空间和模块在作用域定义及使用场景上有何不同？分别举例说明如何在代码中体现这种区别。

Answer 1

作用域定义区别

1. 名字空间（Namespace）：
   • 名字空间主要用于组织代码，它创建的是一个内部作用域。在 TypeScript 早期版本（ES6 模块普及之前），名字空间常用于将相关的代码组织在一起，避免全局命名冲突。名字空间内的代码在该名字空间的作用域内，通过 namespace 关键字定义。
   • 例如：

namespace Validation {
    export const numberRegexp = /^[0 - 9]+$/;
    export function test(value: string) {
        return numberRegexp.test(value);
    }
}
let result = Validation.test('123');

2. 模块（Module）：
   • 模块是基于文件的，每个 TypeScript 文件就是一个模块。模块有自己独立的作用域，模块内定义的变量、函数、类等默认是私有的，只有通过 export 关键字导出后才能在其他模块中使用。模块使用 import 和 export 关键字来管理模块间的依赖和暴露接口。
   • 例如：
   • mathUtils.ts 文件：

// 模块内定义一个函数
function add(a: number, b: number) {
    return a + b;
}
// 导出函数
export { add };

• main.ts 文件：

import { add } from './mathUtils';
let sum = add(2, 3);

使用场景区别

1. 名字空间（Namespace）：
   • 场景：适用于在一个项目中，当需要将一些相关的代码逻辑组织在一起，但又不想为每个逻辑单元创建一个单独的文件时，比如一些工具函数集。例如在一个小型的单页应用中，可能有一些通用的验证函数、格式化函数等，可以放在一个名字空间内。
   • 举例：

namespace Utils {
    export function formatDate(date: Date) {
        return date.toISOString();
    }
    export function formatNumber(num: number) {
        return num.toFixed(2);
    }
}
let formattedDate = Utils.formatDate(new Date());
let formattedNumber = Utils.formatNumber(123.456);

2. 模块（Module）：
   • 场景：在大型项目中，模块是构建复杂应用架构的基础。每个功能模块可以独立开发、测试和维护。例如，一个大型的 Web 应用可能有用户模块、订单模块、支付模块等，每个模块都可以写成独立的 TypeScript 文件，通过模块系统进行管理和交互。
   • 举例：
   • user.ts 文件：

class User {
    constructor(public name: string) {}
}
export { User };

• main.ts 文件：

import { User } from './user';
let user = new User('John');