面试题：TypeScript命名空间与ES6模块的交互及差异

Question

在实际项目中，有时候需要同时使用TypeScript命名空间和ES6模块。请阐述它们之间的主要差异，以及如何在同一个项目里让命名空间与ES6模块良好交互，例如如何从ES6模块中导入命名空间的内容，或者将命名空间的内容导出供ES6模块使用。

Answer 1

主要差异

1. 作用域：
   • TypeScript命名空间：主要用于在全局作用域下组织代码，避免命名冲突。它创建了一个本地作用域，在这个作用域内定义的变量、函数、类等不会污染全局命名空间，但它本质上还是在全局环境中。例如：

namespace MyNamespace {
    export const value = 10;
}
// 可以在全局通过MyNamespace.value访问

• ES6模块：拥有自己独立的作用域，模块内定义的变量、函数、类等默认在模块内部，不会暴露到外部。只有通过export关键字导出的内容才能被其他模块访问。例如：

const privateValue = 10;
export const publicValue = 20;
// privateValue不能被其他模块访问，publicValue可以

2. 加载方式：
   • TypeScript命名空间：在编译时，命名空间会被合并为一个文件（如果有多个相关命名空间文件），加载时是同步加载的，适用于简单项目，不适合大型复杂的应用场景。
   • ES6模块：是异步加载的，浏览器和Node.js等环境都支持。这种异步加载方式使得模块之间的依赖关系处理更灵活，适合构建大型应用。例如在浏览器中：

<script type="module">
    import { something } from './module.js';
    // 异步加载module.js
</script>

3. 导出和导入方式：
   • TypeScript命名空间：使用export关键字定义可从命名空间外部访问的内容，导入时通过/// <reference path="..."/>指令引入其他命名空间文件（在TypeScript编译阶段）。例如：

// file1.ts
namespace Utils {
    export function add(a: number, b: number) {
        return a + b;
    }
}
// file2.ts
/// <reference path="file1.ts"/>
console.log(Utils.add(1, 2));

• ES6模块：使用export关键字导出内容，使用import关键字导入内容。例如：

// module1.ts
export const message = 'Hello';
// module2.ts
import { message } from './module1.js';
console.log(message);

良好交互

1. 从ES6模块中导入命名空间的内容：
   • 首先要将命名空间编译成一个可被ES6模块导入的形式。假设我们有一个命名空间文件namespace.ts：

namespace MyNamespace {
    export const value = 10;
    export function printValue() {
        console.log(value);
    }
}

• 编译时，确保设置合适的编译选项（如--module es6等）。然后在ES6模块中导入，在Node.js环境下可以这样做：

// es6Module.js
import * as MyNamespace from './namespace.js';
console.log(MyNamespace.value);
MyNamespace.printValue();

2. 将命名空间的内容导出供ES6模块使用：
   • 在命名空间文件中，可以通过将命名空间的内容导出为一个ES6模块可识别的形式。例如：

namespace MyNamespace {
    export const value = 10;
    export function printValue() {
        console.log(value);
    }
}
// 将命名空间内容导出
export default MyNamespace;

• 然后在ES6模块中导入：

// es6Module.js
import MyNamespace from './namespace.js';
console.log(MyNamespace.value);
MyNamespace.printValue();

在实际项目中，还需要注意项目的构建工具（如Webpack、Rollup等）的配置，以确保正确处理TypeScript命名空间和ES6模块的交互，同时要注意编译选项（如module、moduleResolution等）的设置。