Skip to content

9.模块VS命名空间

namespace-and-module

11.1 模块

11.1.1 全局模块

  • 在默认情况下,当你开始在一个新的 TypeScript 文件中写下代码时,它处于全局命名空间中

  • 使用全局变量空间是危险的,因为它会与文件内的代码命名冲突。我们推荐使用下文中将要提到的文件模块

foo.ts

typescript
const foo = 123;

bar.ts

typescript
const bar = foo; // allowed

11.1.2 文件模块

  • 文件模块也被称为外部模块。如果在你的 TypeScript 文件的根级别位置含有 import 或者 export,那么它会在这个文件中创建一个本地的作用域
  • 模块是TS中外部模块的简称,侧重于代码和复用
  • 模块在期自身的作用域里执行,而不是在全局作用域里
  • 一个模块里的变量、函数、类等在外部是不可见的,除非你把它导出
  • 如果想要使用一个模块里导出的变量,则需要导入
typescript
export const a = 1;
export const b = 2;
export default 'zhufeng';
import name, { a, b } from './1';
console.log(name, a, b);

11.1.3 模块规范

  • AMD:不要使用它,它仅能在浏览器工作;
  • Systemtypescript:这是一个好的实验,已经被 ES 模块替代;
  • ES 模块:它并没有准备好。
  • 使用 module:commontypescript 选项来替代这些模式,将会是一个好的主意

11.2 命名空间

  • 在代码量较大的情况下,为了避免命名空间冲突,可以将相似的函数、类、接口放置到命名空间内
  • 命名空间可以将代码包裹起来,只对外暴露需要在外部访问的对象,命名空间内通过export向外导出
  • 命名空间是内部模块,主要用于组织代码,避免命名冲突

11.2.1 内部划分

typescript
export namespace zoo {
    export class Dog { eat() { console.log('zoo dog'); } }
}
export namespace home {
    export class Dog { eat() { console.log('home dog'); } }
}
let dog_of_zoo = new zoo.Dog();
dog_of_zoo.eat();
let dog_of_home = new home.Dog();
dog_of_home.eat();
import { zoo } from './3';
let dog_of_zoo = new zoo.Dog();
dog_of_zoo.eat();

11.2.2 原理

  • 其实一个命名空间本质上一个对象,它的作用是将一系列相关的全局变量组织到一个对象的属性
typescript
namespace Numbers {
    export let a = 1;
    export let b = 2;
    export let c = 3;
}
var Numbers;
(function (Numbers) {
    Numbers.a = 1;
    Numbers.b = 2;
    Numbers.c = 3;
})(Numbers || (Numbers = {}));

11.3 文件,模块与命名空间

11.3.1 文件和模块

  • 每个 module都不一样 src\table1.ts

    typescript
    export module Box{
      export class Book1{}
    }

src\table2.ts

typescript
export module Box{
    export class Book1{}
}

src\table3.ts

typescript
export module Box{
    export class Book1{}
}

11.3.2 空间

  • namespace 和 module 不一样,namespace 在全局空间中具有唯一性

src\table1.ts

typescript
namespace Box{
    export class Book1{}
}

src\table2.ts

typescript
namespace Box{
    export class Book1{}
}

src\table3.ts

typescript
namespace Box{
    export class Book1{}
}

11.3.3 文件

  • 每个文件是独立的

src\table1.ts

typescript
export class Book1 { }

src\table2.ts

typescript
export class Book1 { }

src\table3.ts

typescript
export class Book1 { }

Released under the MIT License.