面试题：TypeScript Namespace与ES6模块的对比及应用场景

主要区别

作用域
- Namespace：在TypeScript中，Namespace（命名空间）用于组织代码，它创建的是一个局部作用域。例如：
```
namespace MathUtils {
    export const add = (a: number, b: number) => a + b;
}
// 这里add只能在MathUtils命名空间内或通过MathUtils.add访问
```
- ES6模块：ES6模块有自己独立的作用域。每个模块都有自己的顶级作用域，模块内定义的变量、函数等默认在外部不可见。例如：
```
const add = (a: number, b: number) => a + b;
export { add };
// 这里add在外部需要通过导入才能访问
```
文件与模块关系
- Namespace：多个命名空间可以定义在同一个文件中，并且可以通过namespace关键字合并。例如：
```
namespace MathUtils {
    export const add = (a: number, b: number) => a + b;
}
namespace MathUtils {
    export const subtract = (a: number, b: number) => a - b;
}
```
- ES6模块：一个ES6模块通常对应一个文件。一个文件就是一个独立的模块，通过import和export来导入和导出内容。例如，在mathUtils.js文件中：
```
const add = (a: number, b: number) => a + b;
const subtract = (a: number, b: number) => a - b;
export { add, subtract };
```
导入导出方式
- Namespace：使用/// <reference>指令来引用其他命名空间，在TypeScript编译时会将相关文件合并。例如，有mathUtils.ts和main.ts，在main.ts中：
```
/// <reference path="mathUtils.ts" />
console.log(MathUtils.add(2, 3));
```
- ES6模块：使用import和export关键字进行导入和导出。例如，在main.ts中导入mathUtils.js的内容：
```
import { add, subtract } from './mathUtils.js';
console.log(add(2, 3));
console.log(subtract(5, 3));
```
编译目标
- Namespace：通常编译为JavaScript的立即执行函数（IIFE），用于模拟命名空间的作用域。
- ES6模块：编译后的代码保留模块的结构，在支持ES6模块的环境中可以直接使用，也可以通过工具（如Babel）转换为CommonJS等其他模块格式。

适用场景

Namespace适用场景

小型项目或内部库：当项目规模较小，不需要复杂的模块系统，并且希望在一个文件中组织相关代码时，可以使用命名空间。例如，在一个简单的网页特效脚本中：

namespace AnimationUtils {
    export const fadeIn = (element: HTMLElement) => {
        element.style.opacity = '0';
        const interval = setInterval(() => {
            const opacity = parseFloat(element.style.opacity!) + 0.1;
            if (opacity >= 1) {
                clearInterval(interval);
                element.style.opacity = '1';
            } else {
                element.style.opacity = opacity.toString();
            }
        }, 100);
    };
}
// 在同一文件或通过引用使用AnimationUtils.fadeIn

与旧代码集成：如果项目中有大量旧的JavaScript代码，并且希望逐步引入TypeScript，命名空间可以方便地组织新的TypeScript代码，同时与旧代码共存。

ES6模块适用场景
- 大型项目：在大型前端项目中，模块之间的依赖管理和代码组织非常重要。ES6模块的清晰导入导出机制和独立作用域，使其非常适合构建大型应用。例如，在一个基于Vue或React的大型单页应用中，每个组件、工具函数等都可以作为一个独立的ES6模块。例如，一个Vue组件模块MyComponent.vue：
```
<template>
    <div>
        <p>{{ message }}</p>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
    data() {
        return {
            message: 'Hello, ES6 module!'
        };
    }
});
</script>
```
- 构建可复用的库：当开发一个供外部使用的前端库时，ES6模块是更好的选择，因为它的导入导出方式与现代JavaScript生态系统兼容。例如，开发一个图表绘制库，每个功能（如绘制柱状图、折线图等）可以作为一个独立的ES6模块导出，方便其他开发者导入使用。

星途面试题库

面试题：TypeScript Namespace与ES6模块的对比及应用场景

知识考点

面试题答案

主要区别

适用场景