Skip to main content

TypeScript Namespace

tip
  1. namespace 是 TypeScript 特有的一种组织代码的方式。
  2. namespace 本质上是全局命名空间中的命名 JavaScript 对象。
  3. 推荐使用 namespace 而不是 module, 避免和 ES6 的 module 混淆。
    • module XXX {} -> namespace XXX {}
  4. 当存在同名，但不同上下文的时候，使用 namespace 非常便捷。
    • 例如: 项目里有两个 useResourceId, 增加 namespace 变成 FormContext.useResourceId, ResourceContext.useResourceId
  5. 如果前端关注 bundle size 则不推荐在一个 namespace 里放太多内容 - 无法 tree shaking
  6. 后端复杂结构本身会存在 namespace 的概念
    • 例如: Java 的 package, C# 的 namespace
    • 例如: GameEngine.Render.Core.renderShape, namepsace 提供了更好的组织代码的方式
export namespace A {
  export const B = 1;
}

或

export module A {
  export const B = 1;
}

等同于

export var A;
(function (A) {
  A.B = 1;
})(A || (A = {}));
caution
  • namespace 可能会有 tree shaking 的问题, 可以避免单个 namespace 内容过多
  • export * as name 本质也是 namespace 一种方式，这种方式也是会有 tree shaking 的问题

Namespace 替代写法

  1. 组织 utils
utils.ts
export { foo } from './foo';
index.ts
// 暴露为一个对象，这种场景可直接使用 namespace
export * as utils from './utils';

// 使用时作为 namespace，每次时都要这样定义
import * as utils from './utils';
  1. 单例对象
class _Helper {
  foo() {}
}

export const Helper = new _Helper();

// 或者

export class Helper2 {
  static foo() {}
}

Namespace

当功能更多的时候，更好组织代码

export namespace Helper {
  export function foo() {}
}