一、背景

1 作用域

作用域用来描述代码运行时函数、变量、对象和其他资源的可访问性。
EcmaScript 中主要分为:全局作用域、函数作用域和块级作用域。

2 命名空间

当项目变得复杂时,某些大型脚本或多个引入脚本之间可能会出现变量污染全局或同作用域变量冲突的问题,因此为了解决此问题,就产生了命名空间。

二、用法

1 基本语法

命名空间内的变量标识符与其他命名空间的隔离开,即使与外界重名也不会发送冲突,同时要访问命名空间内的变量标识符,不仅需要加上命名空间,还需命名空间内变量声明时使用导出关键字

  1. // 声明命名空间
  2. namespace SomeNameSpace {
  3. const inaccessible = "a";
  4. export const name = "b";
  5. export interface user {
  6. id: number
  7. name: string
  8. }
  9. }
  10. // 使用命名空间
  11. const user: SomeNameSpace.user = {
  12. id: 1,
  13. name: SomeNameSpace.name
  14. }
  15. // 未导出变量无法访问
  16. // ERROR:类型“typeof SomeNameSpace”上不存在属性“inaccessible”。
  17. SomeNameSpace.inaccessible;

2 引用

前面的基本语法中使用命名空间,感觉就和使用 JavaScript 普通对象类似。实则不然, TypeScript 中的命名空间不仅能声明和导出变量、函数和类等基本数据结构,还能声明和导出 TypeScript 中的数据类型和其他高级用法:

  • 命名空间嵌套

命名空间内还支持嵌套命名空间,访问时也需嵌套访问:

namespace Outer {
  export const value = "o";
  export namespace Inner {
    export const value = "i";
  }
}
const ov = Outer.value;
const iv = Outer.Inner.value;
  • 不同 TypeScript 文件中引用其他文件命名空间使用 /// <reference path="filepath.ts" /> 语法:

    namespace a {
    export const value = 'a';
    }
    
    namespace b {
    export const value = 'b';
    }
    
    /// <reference path="a.ts" />
    /// <reference path="b.ts" />
    const ab = a.value + b.value;
    
  • 引用其他命名空间时如果出现命名空间重复,可自动进行命名空间合并(类似接口合并): ```typescript /// /// const ab = a.value + b.value;

// 命名空间 a 和外部的命名空间 a 合并 namespace a { export const v = ‘A’; // 如果命名空间合并时内部还有同名冲突,就报错 // ERROR: 无法重新声明块范围变量“value”。 export const value = ‘1’; } const Aab = a.v + a.value + b.value; ```