Namespaces & Modules(命名空间和模块)
在 TypeScript 中，Namespaces 和 Modules 是用于组织和管理代码的两种主要机制。虽然它们在某些方面具有相似性，但它们有不同的用途和应用场景。以下是对 TypeScript 中 Namespaces 和 Modules 的详细介绍，包括它们的用法、差异和最佳实践。
Namespaces
什么是 Namespaces?
Namespaces 是 TypeScript 中的一个内部模块系统，用于将相关代码组织在一起，以避免全局命名空间的污染。它们使用 namespace 关键字定义，可以包含类、接口、函数和变量等。
声明和使用 Namespaces
声明 Namespace
namespace MyNamespace {
export class MyClass {
constructor(public name: string) {}
sayHello() {
console.log(`Hello, ${this.name}!`);
}
}
export function greet() {
console.log('Greetings from MyNamespace!');
}
}
使用 Namespace
const myInstance = new MyNamespace.MyClass('TypeScript');
myInstance.sayHello(); // 输出: Hello, TypeScript!
MyNamespace.greet(); // 输出: Greetings from MyNamespace!
嵌套 Namespaces
namespace OuterNamespace {
export namespace InnerNamespace {
export function innerFunction() {
console.log('Inside InnerNamespace');
}
}
}
OuterNamespace.InnerNamespace.innerFunction(); // 输出: Inside InnerNamespace
Modules
什么是 Modules?
Modules 是 TypeScript 和 JavaScript 中的外部模块系统，通过文件和文件夹来组织代码。它们符合 ES6 标准，并使用 import 和 export 语法导入和导出模块。模块在模块范围内具有自己的作用域，不会污染全局命名空间。
声明和使用 Modules
声明 Module
创建一个名为 module1.ts 的文件：
// module1.ts
export class MyClass {
constructor(public name: string) {}
sayHello() {
console.log(`Hello, ${this.name}!`);
}
}
export function greet() {
console.log('Greetings from module1!');
}
使用 Module
创建一个名为 module2.ts 的文件：
// module2.ts
import { MyClass, greet } from './module1';
const myInstance = new MyClass('TypeScript');
myInstance.sayHello(); // 输出: Hello, TypeScript!
greet(); // 输出: Greetings from module1!
Differences between Namespaces and Modules
用途
- Namespaces：适用于在同一个文件或全局范围内组织代码，通常用于小型项目或旧项目的代码组织。
- Modules：适用于大型项目，通过文件和文件夹组织代码，符合现代 JavaScript 标准，支持更好的作用域隔离和模块加载。
语法
- Namespaces：使用
namespace关键字定义，通过点符号访问命名空间成员。 - Modules：使用
import和export关键字导入和导出模块成员。
作用域
- Namespaces：在全局作用域中定义，所有导出的成员在全局可访问。
- Modules：在模块作用域中定义，导出的成员需要显式导入才能访问。
加载机制
- Namespaces：不依赖模块加载器，直接在全局作用域中可用。
- Modules：依赖模块加载器（如 CommonJS、AMD、ES6 模块），需要正确的模块解析配置。
Best Practices
何时使用 Namespaces
- 小型项目或简单脚本。
- 需要在全局范围内共享代码的库或工具。
- 将现有的 JavaScript 代码迁移到 TypeScript。
何时使用 Modules
- 大型项目或复杂应用。
- 需要模块化加载和作用域隔离。
- 现代 JavaScript 开发环境，使用构建工具（如 Webpack、Rollup）。
示例项目
文件结构
/project
├── index.ts
├── myNamespace.ts
└── myModule
├── module1.ts
└── module2.ts
myNamespace.ts
namespace MyNamespace {
export class MyClass {
constructor(public name: string) {}
sayHello() {
console.log(`Hello, ${this.name}!`);
}
}
export function greet() {
console.log('Greetings from MyNamespace!');
}
export const myConst = 42;
}
index.ts
/// <reference path="./myNamespace.ts" />
const myInstance = new MyNamespace.MyClass('TypeScript');
myInstance.sayHello(); // 输出: Hello, TypeScript!
MyNamespace.greet(); // 输出: Greetings from MyNamespace!
console.log(MyNamespace.myConst); // 输出: 42
myModule/module1.ts
export class MyClass {
constructor(public name: string) {}
sayHello() {
console.log(`Hello, ${this.name}!`);
}
}
export function greet() {
console.log('Greetings from module1!');
}
myModule/module2.ts
import { MyClass, greet } from './module1';
const myInstance = new MyClass('TypeScript');
myInstance.sayHello(); // 输出: Hello, TypeScript!
greet(); // 输出: Greetings from module1!
总结
Namespaces 和 Modules 是 TypeScript 提供的两种组织代码的机制。Namespaces 适用于小型项目或需要全局共享代码的场景，而 Modules 则适用于大型项目，通过模块化加载和作用域隔离来组织代码。在现代开发中，Modules 更加符合 JavaScript 标准，并且是推荐的代码组织方式。理解这两者的差异和应用场景，能够帮助你更好地组织和管理 TypeScript 项目。