目录

  1. 命名空间概述
  2. 为什么使用命名空间
  3. 命名空间的基本语法
  4. 嵌套命名空间
  5. 命名空间的导出（export）与引用（import）
  6. 使用 /// <reference path="..." /> 引用命名空间
  7. 命名空间 vs 模块（Module）
  8. 命名空间的最佳实践
  9. 参考资料

1. 命名空间概述

命名空间（Namespace） 是 TypeScript 提供的一种组织代码的方式，主要用于避免全局作用域污染和命名冲突。在 JavaScript 中，由于所有变量默认属于全局作用域，不同文件中的变量可能会产生冲突，而命名空间可以有效解决这个问题。

在 ES6 之前，JavaScript 主要通过**立即执行函数（IIFE）**实现类似的作用：

var MyNamespace = (function () {
    var privateVar = "I am private";
    return {
        publicVar: "I am public"
    };
})();
console.log(MyNamespace.publicVar); // "I am public"

而在 TypeScript 中，我们可以使用 namespace 关键字定义命名空间，来更清晰地管理代码。

2. 为什么使用命名空间

  • 避免全局作用域污染：多个文件中可能存在相同的变量或函数，命名空间可以有效隔离它们。
  • 提高代码组织性：将相关的代码逻辑分组，使代码更易读、易维护。
  • 增强模块化：命名空间可以让代码按功能模块划分，提升可重用性。

3. 命名空间的基本语法

使用 namespace 关键字定义命名空间，并在其中定义变量、函数、类、接口等：

namespace MyNamespace {
    export const myVar = "Hello, Namespace!";
    
    export function myFunction() {
        console.log("Function inside a namespace");
    }
    
    export class MyClass {
        greet() {
            console.log("Hello from MyClass inside MyNamespace");
        }
    }
}

// 使用命名空间中的成员
console.log(MyNamespace.myVar); // "Hello, Namespace!"
MyNamespace.myFunction(); // "Function inside a namespace"
const instance = new MyNamespace.MyClass();
instance.greet(); // "Hello from MyClass inside MyNamespace"

关键点

  1. export 关键字：如果不加 export，命名空间内的变量或函数默认是私有的，外部无法访问。
  2. 访问命名空间成员：必须使用 命名空间.成员名 访问。

4. 嵌套命名空间

命名空间可以嵌套使用，以进一步细分代码逻辑：

namespace OuterNamespace {
    export namespace InnerNamespace {
        export function sayHello() {
            console.log("Hello from InnerNamespace");
        }
    }
}

// 使用嵌套命名空间中的方法
OuterNamespace.InnerNamespace.sayHello(); // "Hello from InnerNamespace"

嵌套命名空间适用于更复杂的项目结构，比如：

namespace App {
    export namespace Models {
        export class User {
            constructor(public name: string) {}
        }
    }

    export namespace Services {
        export function getUser() {
            return new Models.User("Alice");
        }
    }
}

const user = App.Services.getUser();
console.log(user.name); // "Alice"

5. 命名空间的导出（export）与引用（import）

（1）拆分文件

当项目变大时，我们可以将命名空间拆分到不同的文件中：

📌 math.ts

namespace MathUtils {
    export function add(a: number, b: number): number {
        return a + b;
    }
}

📌 app.ts

/// <reference path="math.ts" />

console.log(MathUtils.add(2, 3)); // 5

TypeScript 不会自动查找外部文件，因此需要使用 /// <reference path="..." /> 引入其他文件。

6. 使用 /// <reference path="..." /> 引用命名空间

当使用多个 TypeScript 文件时，必须明确告诉 TypeScript 代码之间的依赖关系，/// <reference path="..." /> 指令用于引入命名空间：

/// <reference path="math.ts" />
/// <reference path="string.ts" />

然后在 TypeScript 编译时使用 tsc --outFile output.js app.ts，将多个文件合并为一个 JavaScript 文件。

7. 命名空间 vs 模块（Module）

命名空间（Namespace） 和 模块（Module） 都可以用于组织代码，但它们的用途不同：

特性命名空间（Namespace）模块（Module）
作用范围全局文件级别
代码组织方式通过 namespace 关键字通过 import/export
适用场景适用于组织大量代码但不需要导入/导出的情况适用于现代前端开发（如 Node.js、ES6）
需要编译器支持需要 /// <reference>使用 ES6 import/export

（1）命名空间示例

namespace Utils {
    export function log(msg: string) {
        console.log(msg);
    }
}
Utils.log("Hello"); // "Hello"

（2）模块示例

// utils.ts
export function log(msg: string) {
    console.log(msg);
}

// app.ts
import { log } from "./utils";
log("Hello"); // "Hello"

📌 推荐使用 模块（Module） 而不是 命名空间（Namespace），尤其是在现代前端开发中。

8. 命名空间的最佳实践

✅ 仅在全局脚本中使用命名空间，对于现代应用，优先使用 ES6 Modules。
✅ 避免过深的嵌套命名空间，建议不超过 2 层。
✅ 使用 export 明确暴露外部 API，避免不必要的全局污染。
✅ 在多文件项目中使用 /// <reference path="..." /> 引入命名空间，并通过 tsc --outFile 进行编译。

9. 参考资料

总结

  • 命名空间用于组织代码，防止命名冲突。
  • 通过 export 关键字暴露成员，外部才能访问。
  • 嵌套命名空间用于复杂项目，但不宜过深。
  • /// <reference path="..." /> 用于在多文件项目中引用命名空间。
  • 在现代 TypeScript 项目中，推荐使用 ES6 模块 而非 命名空间。 🚀