通过这段代码来演示命名空间的用法。
interface Animal {
name: string;
eat(): void;
}
class Dog implements Animal {
name: string;
constructor(theName: string) {
this.name = theName;
}
eat() {
console.log(`${this.name} 吃狗粮。`);
}
}
class Cat implements Animal {
name: string;
constructor(theName: string) {
this.name = theName;
}
eat() {
console.log(`${this.name} 吃猫粮。`);
}
}
一、命名空间的声明
同Java的包、.Net的命名空间一样，TypeScript的命名空间可以将代码包裹起来，只对外暴露需要在外部访问的对象。命名空间内的对象通过export关键字对外暴露。
将上面的例子进行修改
namespace Biology {
export interface Animal {
name: string;
eat(): void;
}
export class Dog implements Animal {
name: string;
constructor(theName: string) {
this.name = theName;
}
eat() {
console.log(`${this.name} 吃狗粮。`);
}
}
export class Cat implements Animal {
name: string;
constructor(theName: string) {
this.name = theName;
}
eat() {
console.log(`${this.name} 吃猫粮。`);
}
}
}
let dog: Biology.Animal;
dog = new Biology.Dog('狗狗');
dog.eat();通过namespace关键字声明命名空间，通过export导出需要在外部使用的对象。在命名空间外部需要通过“完全限定名”访问这些对象。
二、命名空间的引用
通常情况下，声明的命名空间代码和调用的代码不在同一个文件里
biology.ts
namespace Biology {
export interface Animal {
name: string;
eat(): void;
}
export class Dog implements Animal {
name: string;
constructor(theName: string) {
this.name = theName;
}
eat() {
console.log(`${this.name} 吃狗粮。`);
}
}
export class Cat implements Animal {
name: string;
constructor(theName: string) {
this.name = theName;
}
eat() {
console.log(`${this.name} 吃猫粮。`);
}
}
}
biology.tsapp.ts
/// <reference path="biology.ts" />
let dog: Biology.Animal;
dog = new Biology.Dog('狗狗');
dog.eat();通过reference注释引用命名空间，即可通过“完全限定名”进行访问。
更有甚者，相同的命名空间会声明在不同的文件中
1 namespace Biology {
2 export interface Animal {
3 name: string;
4 eat(): void;
5 }
6 }
1 /// <reference path="biology.ts" />
2
3 namespace Biology {
4 export class Dog implements Animal {
5 name: string;
6 constructor(theName: string) {
7 this.name = theName;
8 }
9
10 eat() {
11 console.log(`${this.name} 吃狗粮。`);
12 }
13 }
14 } 1 /// <reference path="biology.ts" />
2
3 namespace Biology {
4 export class Cat implements Animal {
5 name: string;
6 constructor(theName: string) {
7 this.name = theName;
8 }
9
10 eat() {
11 console.log(`${this.name} 吃猫粮。`);
12 }
13 }
14 } 1 // app.ts
2
3 /// <reference path="biology.ts" />
4 /// <reference path="cat.ts" />
5 /// <reference path="dog.ts" />
6
7
8 let dog: Biology.Animal;
9 dog = new Biology.Dog('狗狗');
10 dog.eat();
11
12 let cat: Biology.Animal;
13 cat = new Biology.Cat('喵星人');
14 cat.eat();编译之后，每一个文件都将编译成对应的一个JavaScript文件，使用时需要将这些文件都引用进来。通过如下命令，可以将有相同命名空间的文件编译到一个JavaScript文件中，这样在引用时只需要一个文件即可。
1 tsc --outFile js\biology.js ts\biology.ts ts\dog.ts ts\cat.ts将biology.ts、dog.ts、cat.ts编辑到一个JavaScript文件biology.js文件内，编译后的文件内容如下
1 /// <reference path="biology.ts" />
2 var Biology;
3 (function (Biology) {
4 var Dog = (function () {
5 function Dog(theName) {
6 this.name = theName;
7 }
8 Dog.prototype.eat = function () {
9 console.log(this.name + " \u5403\u72D7\u7CAE\u3002");
10 };
11 return Dog;
12 }());
13 Biology.Dog = Dog;
14 })(Biology || (Biology = {}));
15 /// <reference path="biology.ts" />
16 var Biology;
17 (function (Biology) {
18 var Cat = (function () {
19 function Cat(theName) {
20 this.name = theName;
21 }
22 Cat.prototype.eat = function () {
23 console.log(this.name + " \u5403\u732B\u7CAE\u3002");
24 };
25 return Cat;
26 }());
27 Biology.Cat = Cat;
28 })(Biology || (Biology = {}));
三、命名空间的别名
在引用命名空间时，可以通过import关键字起一个别名
1 // app.ts
2
3 /// <reference path="biology.ts" />
4 /// <reference path="cat.ts" />
5 /// <reference path="dog.ts" />
6
7 import bio_other = Biology; // 别名
8
9 let dog: bio_other.Animal;
10 dog = new bio_other.Dog('狗狗');
11 dog.eat();
12
13 let cat: bio_other.Animal;
14 cat = new bio_other.Cat('喵星人');
15 cat.eat();
四、命名空间与模块
命名空间：代码层面的归类和管理。将有相似功能的代码都归一到同一个空间下进行管理，方便其他代码引用。更多的是侧重代码的复用。
模块：一个完整功能的封装，对外提供的是一个具有完整功能的功能包，需要显式引用。一个模块里可能会有多个命名空间。
