命名空间定义与使用

命名空间的定义

TypeScript中的命名空间是一种组织代码的方式，用于避免全局作用域中的命名冲突。命名空间可以将相关的代码封装在一个特定的名称下，形成一个独立的代码块。定义命名空间使用namespace关键字：

namespace MyNamespace {
  export interface Person {
    name: string;
    age: number;
  }

  export function greet(person: Person) {
    return `Hello, ${person.name}!`;
  }
}

在这个例子中，MyNamespace包含了一个Person接口和一个greet函数。注意export关键字是必须的，否则这些成员在命名空间外部不可见。

命名空间可以嵌套：

namespace Outer {
  export namespace Inner {
    export const message = "Hello from inner namespace";
  }
}

命名空间的使用

要使用命名空间中的成员，需要通过完全限定名访问：

const person: MyNamespace.Person = {
  name: "Alice",
  age: 30
};

console.log(MyNamespace.greet(person)); // 输出: Hello, Alice!

对于嵌套命名空间：

console.log(Outer.Inner.message); // 输出: Hello from inner namespace

可以使用import为命名空间创建别名以简化代码：

import NS = MyNamespace;
const person2: NS.Person = { name: "Bob", age: 25 };

命名空间与模块的区别

命名空间和模块都是组织代码的方式，但有重要区别：

1. 作用域：

   • 命名空间在全局作用域中运行
   • 模块有自己的作用域

2. 依赖关系：

   • 命名空间通过/// <reference>指令声明依赖
   • 模块使用import/export语法

3. 加载方式：

   • 命名空间通常用于客户端代码，通过<script>标签加载
   • 模块使用模块加载器(如CommonJS、AMD等)

命名空间示例文件结构：

project/
├── app.ts
├── utilities.ts

utilities.ts:

namespace Utilities {
  export function formatDate(date: Date) {
    return date.toISOString();
  }
}

app.ts:

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

const today = new Date();
console.log(Utilities.formatDate(today));

命名空间的合并

TypeScript允许合并同名的命名空间，这在扩展第三方库时很有用：

namespace MyLib {
  export function func1() { /*...*/ }
}

// 稍后在另一个文件中
namespace MyLib {
  export function func2() { /*...*/ }
}

// 现在MyLib包含func1和func2

接口也可以与命名空间合并：

interface Person {
  name: string;
}

namespace Person {
  export function create(name: string): Person {
    return { name };
  }
}

const p = Person.create("Charlie");

命名空间在现代TypeScript中的角色

随着ES6模块的普及，命名空间的使用有所减少，但在某些场景仍然有价值：

1. 全局库声明：为第三方库添加类型定义
2. 遗留代码迁移：逐步将旧代码迁移到模块系统
3. 复杂类型组织：组织大型项目中的类型定义

全局库声明示例：

declare namespace Chart {
  interface Options {
    responsive: boolean;
  }
  
  function create(config: Options): void;
}

命名空间与模块的混合使用

在模块文件中也可以使用命名空间来组织内部结构：

// shapes.ts
export namespace Shapes {
  export class Circle { /*...*/ }
  export class Square { /*...*/ }
}

// 使用
import { Shapes } from "./shapes";
const circle = new Shapes.Circle();

这种模式在需要将多个相关类分组时很有用，但通常更推荐使用纯模块方式：

// 更模块化的替代方案
export class Circle { /*...*/ }
export class Square { /*...*/ }

// 使用
import { Circle, Square } from "./shapes";

命名空间的编译输出

了解命名空间如何编译为JavaScript有助于理解其工作原理。上面的MyNamespace示例会编译为：

var MyNamespace;
(function (MyNamespace) {
  function greet(person) {
    return "Hello, " + person.name + "!";
  }
  MyNamespace.greet = greet;
})(MyNamespace || (MyNamespace = {}));

这种立即调用函数表达式(IIFE)模式创建了一个闭包，确保命名空间内的变量不会污染全局作用域。

命名空间的最佳实践

1. 避免过度使用：在模块化项目中优先使用ES6模块
2. 合理命名：使用有意义的、不太可能冲突的名称
3. 适度嵌套：嵌套层次不宜过深
4. 与模块结合：在模块内部使用命名空间组织复杂逻辑
5. 一致性：项目中统一使用命名空间或模块，避免混用造成混乱

大型项目中组织类型的示例：

namespace Data {
  export interface User {
    id: number;
    name: string;
  }
  
  export namespace API {
    export interface Response {
      success: boolean;
      data: any;
    }
  }
}

// 使用
function handleResponse(res: Data.API.Response) {
  if (res.success) {
    const user: Data.User = res.data;
    // ...
  }
}