面试题：TypeScript中模块化与命名空间在类型管理上的区别

模块化和命名空间在类型管理方面的不同点

作用域：
- 模块化：每个模块都有自己独立的作用域，模块内定义的类型默认对外不可见，需通过 export 关键字导出后才能在其他模块中使用。模块之间通过 import 和 export 进行交互，使得代码结构清晰，便于维护和复用。例如在大型项目中，不同功能模块可以各自管理自己的类型，避免命名冲突。
- 命名空间：命名空间是在全局作用域下创建一个带有名称的作用域，用于组织代码和避免命名冲突。它适用于将相关代码组织在一起，但由于是在全局作用域，在大型项目中可能会导致命名污染的风险，特别是当多个命名空间有相同名称时。
文件结构与加载机制：
- 模块化：通常一个文件就是一个模块，在现代JavaScript环境（如ES6模块系统）中，模块的加载是异步的，有助于提高页面加载性能。在TypeScript中，可以使用ES6的模块化语法（import 和 export），也支持CommonJS、AMD等其他模块规范。例如在Node.js项目中，常使用CommonJS模块规范（exports 或 module.exports），在前端项目中则多使用ES6模块规范。
- 命名空间：命名空间没有直接的文件对应关系，多个命名空间可以定义在同一个文件中，也可以通过 /// <reference> 指令引用其他命名空间所在文件。它的加载机制相对简单，主要用于组织代码结构，而非像模块化那样注重模块的加载和依赖管理。
使用场景：
- 模块化：适用于大型应用程序的架构设计，将不同功能拆分成独立模块，每个模块有明确的职责和接口，便于团队协作开发和代码的长期维护。例如，一个电商应用可以拆分成用户模块、商品模块、订单模块等，每个模块通过模块化管理自己的类型和逻辑。
- 命名空间：更适合小型项目或者在大型项目中对一些工具函数、辅助类型等进行组织，这些代码不需要像模块那样有复杂的依赖管理和独立作用域。例如，在一个小型的工具库中，可以使用命名空间来组织不同功能的工具函数及其相关类型。

示例说明

模块化在类型管理中的使用

假设我们有一个 user.ts 模块，定义了一个 User 类型：

// user.ts
export interface User {
    name: string;
    age: number;
}

export function createUser(name: string, age: number): User {
    return { name, age };
}

在另一个模块 main.ts 中使用这个类型和函数：

// main.ts
import { User, createUser } from './user';

const myUser: User = createUser('John', 30);
console.log(myUser);

命名空间在类型管理中的使用

定义一个命名空间 Utils，其中包含一个 MathUtils 子命名空间和 NumberUtils 类型：

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

    export type NumberUtils = {
        value: number;
        double(): number;
    };
}

let numUtils: Utils.NumberUtils = {
    value: 5,
    double() {
        return this.value * 2;
    }
};

let result = Utils.MathUtils.add(numUtils.value, numUtils.double());
console.log(result);

星途面试题库

面试题：TypeScript中模块化与命名空间在类型管理上的区别

知识考点

面试题答案

模块化和命名空间在类型管理方面的不同点

示例说明

模块化在类型管理中的使用

命名空间在类型管理中的使用