博客站

在 TypeScript 中，namespace 和 module 是用于组织代码的两种不同机制。它们有一些相似之处，但在使用场景和实现方式上有显著的区别。以下是它们的详细对比：

namespace（命名空间）

namespace 是 TypeScript 早期引入的一种代码组织方式，用于在全局命名空间中创建隔离的代码块，避免命名冲突。namespace 主要用于在单个文件中组织代码，或者通过引用其他文件中的命名空间来扩展功能。

示例

namespace MyNamespace {
    export const myVariable = 42;

    export function myFunction() {
        console.log("Hello from MyNamespace!");
    }
}

MyNamespace.myFunction(); // 输出: Hello from MyNamespace!
console.log(MyNamespace.myVariable); // 输出: 42

特点

• 隔离作用域：namespace 提供了一个隔离的作用域，避免全局命名冲突。
• 可嵌套：namespace 可以嵌套使用，进一步组织代码。
• 跨文件扩展：可以通过 reference 指令和 namespace 的合并特性，跨文件扩展命名空间。

跨文件扩展示例

// file1.ts
namespace MyNamespace {
    export function function1() {
        console.log("Function 1");
    }
}

// file2.ts
/// <reference path="file1.ts" />
namespace MyNamespace {
    export function function2() {
        console.log("Function 2");
    }
}

MyNamespace.function1(); // 输出: Function 1
MyNamespace.function2(); // 输出: Function 2

module（模块）

module 是 TypeScript 中更现代和推荐的代码组织方式，基于 ES6 模块系统。module 允许你将代码分割成多个文件，并通过 import 和 export 语句来管理依赖关系。

示例

// myModule.ts
export const myVariable = 42;

export function myFunction() {
    console.log("Hello from myModule!");
}

// main.ts
import { myVariable, myFunction } from "./myModule";

myFunction(); // 输出: Hello from myModule!
console.log(myVariable); // 输出: 42

特点

• 模块化：module 允许将代码分割成多个文件，每个文件是一个独立的模块。
• 依赖管理：通过 import 和 export 语句明确管理模块之间的依赖关系。
• 兼容性：module 语法与 ES6 模块系统兼容，适合现代 JavaScript 开发。

namespace 和 module 的区别

使用建议

• 新项目：推荐使用 module，因为它更符合现代 JavaScript 的开发实践，并且与 ES6 模块系统兼容。
• 旧项目：如果项目已经使用了 namespace，可以继续使用，但建议逐步迁移到 module。
• 全局命名空间：如果需要全局命名空间（例如在浏览器环境中），可以考虑使用 namespace，但要注意避免全局污染。

总结

namespace 和 module 是 TypeScript 中用于组织代码的两种不同机制。namespace 主要用于在全局命名空间中创建隔离的代码块，而 module 则是基于 ES6 模块系统的现代代码组织方式。理解它们的区别和使用场景，可以帮助你更好地组织和管理 TypeScript 代码。