面试题：TypeScript中命名空间与现代模块系统在导入导出方面的差异

Question

请详细阐述TypeScript命名空间与现代模块系统在导入和导出机制上有哪些不同点，并分别举例说明如何在这两种方式下进行简单的函数导入与导出。

Answer 1

命名空间（内部模块）

1. 导入导出机制：
   • 导出：在命名空间内，使用export关键字声明要导出的函数、类型等。命名空间内部可以有多个导出声明。
   • 导入：通过/// <reference>指令引用其他命名空间文件。在同一个文件内，可直接使用命名空间内导出的内容。
2. 示例：
   • 导出函数：

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

• 导入并使用：假设上述代码在utils.ts文件中，在另一个文件main.ts中：

/// <reference path="utils.ts" />
console.log(Utils.add(1, 2));

现代模块系统（ES6模块）

1. 导入导出机制：
   • 导出：有两种主要方式，一种是使用export关键字在声明处导出，另一种是使用export { }在文件末尾统一导出。
   • 导入：使用import关键字导入模块，可按需导入、整体导入等多种方式。
2. 示例：
   • 导出函数：

// 方式一：声明处导出
export function subtract(a: number, b: number): number {
    return a - b;
}
// 方式二：统一导出
function multiply(a: number, b: number): number {
    return a * b;
}
export { multiply };

• 导入并使用：

// 按需导入
import { subtract, multiply } from './mathFunctions.ts';
console.log(subtract(5, 3));
console.log(multiply(2, 4));
// 整体导入
import * as math from './mathFunctions.ts';
console.log(math.subtract(7, 4));
console.log(math.multiply(3, 5));

不同点总结

1. 导入方式：
   • 命名空间使用/// <reference>指令，这更像是一种文件引用方式，且通常用于同一项目内的文件关联。
   • 现代模块系统使用import关键字，支持多种灵活的导入方式，如按需导入、整体导入等，适用于各种模块加载场景，包括第三方模块。
2. 导出方式：
   • 命名空间在声明处使用export导出，且命名空间内的所有导出内容都在该命名空间下。
   • 现代模块系统除了声明处导出，还支持统一导出，导出的内容可以按需导入到不同模块中，灵活性更高。
3. 作用域：
   • 命名空间的作用域相对局限于项目内，不同命名空间通过名称区分，避免全局污染。
   • 现代模块系统每个模块都有自己独立的作用域，模块之间通过导入导出进行交互，减少全局变量的影响。