面试题：TypeScript中名字空间与模块化的区别

Question

请详细阐述TypeScript里名字空间和模块化在作用域、文件组织、导入导出方式等方面有哪些区别？

Answer 1

作用域

• 名字空间：
  • 名字空间在全局作用域下创建一个唯一的命名空间，其内部定义的变量、函数、类等标识符只在该名字空间内有效，避免全局作用域的命名冲突。例如：

namespace MyNamespace {
    export const myVar = 'Hello';
    export function myFunc() {
        console.log(myVar);
    }
}
// 外部访问需要通过名字空间名
MyNamespace.myFunc(); 

• 模块化：
  • 模块有自己独立的作用域，模块内定义的变量、函数、类等默认是私有的，不会污染全局作用域。只有通过 export 导出的内容才能被外部访问。例如：

// module.ts
const privateVar = 'private';
export const publicVar = 'public';
export function publicFunc() {
    console.log(privateVar);
}

文件组织

• 名字空间：
  • 名字空间可在一个文件中定义多个，也可跨文件定义。不同文件中同名的名字空间会自动合并。例如：

// file1.ts
namespace MyNamespace {
    export const value1 = 1;
}
// file2.ts
namespace MyNamespace {
    export const value2 = 2;
}
// 合并后可统一访问
console.log(MyNamespace.value1); 
console.log(MyNamespace.value2); 

• 模块化：
  • 每个模块通常对应一个独立的文件，文件即模块。模块之间相互独立，通过导入导出建立联系。例如 module1.ts 和 module2.ts 是两个不同模块，通过 import 和 export 进行交互。

导入导出方式

• 名字空间：
  • 导出：使用 export 关键字声明要导出的成员，如变量、函数、类等。例如：

namespace MyNamespace {
    export const myExportedVar = 'exported';
}

- **导入**：使用 `/// <reference>` 指令来引用其他包含名字空间定义的文件。例如：

/// <reference path="otherFileWithNamespace.ts" />
console.log(MyNamespace.myExportedVar); 

• 模块化：
  • 导出：使用 export 关键字导出模块内成员，有多种导出方式，如：

// 导出单个
export const myExportedValue = 42;
// 导出函数
export function myFunction() { }
// 导出类
export class MyClass { }
// 导出多个
const a = 1;
const b = 2;
export { a, b };
// 默认导出
export default function () { } 

- **导入**：使用 `import` 关键字导入其他模块的内容，例如：

// 导入默认导出
import myDefaultExport from './moduleWithDefaultExport';
// 导入命名导出
import { myExportedValue } from './moduleWithNamedExports';
// 整体导入
import * as myModule from './module';