说说你对 TypeScript 中命名空间的理解？应用场景？

问题解析

命名空间是 TypeScript 早期用于组织代码的机制，考察候选人对命名空间与模块的区别、使用方式以及现代 TypeScript 开发中的定位的理解。

核心概念

命名空间（Namespace）：内部模块，用于组织代码
模块（Module）：外部模块，基于 ES Module
全局污染：命名空间可能导致的全局命名冲突
声明合并：同名命名空间自动合并
三斜线指令：/// <reference path="..." />

详细解答

1. 命名空间是什么

命名空间一个最明确的目的就是解决重名问题。

命名空间定义了标识符的可见范围，一个标识符可在多个名字空间中定义，它在不同名字空间中的含义是互不相干的。

这样，在一个新的名字空间中可定义任何标识符，它们不会与任何已有的标识符发生冲突，因为已有的定义都处于其他名字空间中。

TypeScript 中命名空间使用 namespace 来定义，语法格式如下：

namespace SomeNameSpaceName {
  export interface ISomeInterfaceName { }
  export class SomeClassName { }
}

2. 命名空间的使用

2.1 基本使用

namespace Letter {
  export let a = 1;
  export let b = 2;
  export let c = 3;
  // ...
  export let z = 26;
}

// 使用方式
console.log(Letter.a); // 1
console.log(Letter.b); // 2

2.2 编译结果

命名空间本质上是一个对象，作用是将一系列相关的全局变量组织到一个对象的属性。

// TypeScript
namespace Letter {
  export let a = 1;
  export let b = 2;
  export let c = 3;
}

// 编译后的 JavaScript
var Letter;
(function (Letter) {
  Letter.a = 1;
  Letter.b = 2;
  Letter.c = 3;
})(Letter || (Letter = {}));

2.3 嵌套命名空间

namespace Outer {
  export namespace Inner {
    export const value = 123;
  }
}

console.log(Outer.Inner.value); // 123

2.4 命名空间别名

namespace Shapes {
  export namespace Polygons {
    export class Triangle { }
    export class Square { }
  }
}

import polygons = Shapes.Polygons;
let sq = new polygons.Square();

3. 命名空间 vs 模块

3.1 模块（Module）

TypeScript 与 ECMAScript 2015 一样，任何包含顶级 import 或者 export 的文件都被当成一个模块。

相反地，如果一个文件不带有顶级的 import 或者 export 声明，那么它的内容被视为全局可见的。

// 1.ts
const a = 1

// 2.ts
const a = 1 // Error: 重复声明 "a"

// 解决：添加 export 使其成为模块
export const a = 1;

3.2 主要区别

特性	命名空间（Namespace）	模块（Module）
组织方式	全局命名空间下的对象	文件级别的独立作用域
依赖管理	难以识别依赖关系	显式 import/export
编译结果	生成 IIFE 代码	遵循 ES Module 或 CommonJS
现代推荐度	不推荐（遗留方案）	推荐
使用场景	.d.ts 文件、全局库	现代应用开发

3.3 现代 TypeScript 的建议

在正常的 TS 项目开发过程中并不建议用命名空间
通常在通过 .d.ts 文件标记 js 库类型的时候使用命名空间
主要作用是给编译器编写代码的时候参考使用

4. 命名空间的声明合并

TypeScript 中，同名的命名空间会自动合并：

namespace Animal {
  export class Dog { }
}

namespace Animal {
  export class Cat { }
}

// 等效于
namespace Animal {
  export class Dog { }
  export class Cat { }
}

const dog = new Animal.Dog();
const cat = new Animal.Cat();

5. 三斜线指令

在使用命名空间时，需要使用三斜线指令引用其他文件：

/// <reference path="Validation.ts" />
/// <reference path="LettersOnlyValidator.ts" />
/// <reference path="ZipCodeValidator.ts" />

let strings = ["Hello", "98052", "101"];

// 使用命名空间
let validators: { [s: string]: Validation.StringValidator } = {};
validators["ZIP code"] = new Validation.ZipCodeValidator();
validators["Letters only"] = new Validation.LettersOnlyValidator();

深入理解

命名空间的历史背景

在 ES6 Module 标准化之前，TypeScript 提供了 namespace（原名 internal module）来组织大型代码库：

// TypeScript 1.5 之前
module MyModule {
  export const value = 123;
}

// TypeScript 1.5 之后
namespace MyNamespace {
  export const value = 123;
}

随着 ES6 Module 成为标准，推荐使用 import/export 而非 namespace。

何时还使用命名空间

类型定义文件（.d.ts）：为无类型的 JavaScript 库提供类型

// jquery.d.ts
declare namespace JQuery {
  interface AjaxSettings {
    url?: string;
    method?: string;
  }

  function ajax(settings: AjaxSettings): void;
}

declare const $: JQuery;

全局扩展：扩展全局对象

// 扩展 Window 对象
declare global {
  interface Window {
    myLib: any;
  }
}

应用场景

1. 第三方库类型定义

// lodash.d.ts
export = _;
export as namespace _;

declare namespace _ {
  function chunk<T>(array: T[], size?: number): T[][];
  function compact<T>(array: (T | null | undefined | false | 0 | "")[]): T[];
  // ...
}

2. 全局插件扩展

// vue-shims.d.ts
declare module "vue" {
  export interface ComponentCustomProperties {
    $myProperty: string;
  }
}

3. 遗留代码维护

维护使用命名空间的老项目时，需要理解其工作原理。

最佳实践

新项目优先使用 ES Module：使用 import/export
避免全局命名空间污染：不要将变量声明在全局作用域
类型定义文件使用 declare namespace：为 JS 库提供类型
不要混用 namespace 和 module：保持代码组织方式一致

面试要点

命名空间目的：解决重名问题，组织相关代码
语法：namespace Name { export ... }
编译结果：生成 IIFE，将变量挂载到对象上
与模块的区别：
- 命名空间：全局对象，依赖关系不清晰
- 模块：文件级别作用域，显式依赖
现代推荐：优先使用 ES Module，命名空间主要用于 .d.ts 文件
声明合并：同名命名空间自动合并
三斜线指令：/// <reference path="..." /> 引用其他文件