TypeScript学习笔记（七） - 命名空间

左手的ㄟ右手 2022-05-27 01:58 156阅读 0赞

> 本篇将介绍TypeScript的命名空间，并简单说明一下与模块的区别。

在之前的例子里，有如下一段代码，通过修改这段代码来演示命名空间的用法。

![复制代码][copycode.gif]

1 interface Animal {
     2     name: string;
     3     eat(): void;
     4 }
     5 
     6 class Dog implements Animal {
     7     name: string;
     8     constructor(theName: string) {
     9         this.name = theName;
    10     }
    11 
    12     eat() {
    13         console.log(`${
        this.name} 吃狗粮。`);
    14     }
    15 }
    16 
    17 class Cat implements Animal {
    18     name: string;
    19     constructor(theName: string) {
    20         this.name = theName;
    21     }
    22 
    23     eat() {
    24         console.log(`${
        this.name} 吃猫粮。`);
    25     }
    26 }

![复制代码][copycode.gif]

### 一、命名空间的声明 ###

同Java的包、.Net的命名空间一样，TypeScript的命名空间可以将代码包裹起来，只对外暴露需要在外部访问的对象。命名空间内的对象通过export关键字对外暴露。

将上面的例子进行修改

![复制代码][copycode.gif]

1 namespace Biology {
     2     export interface Animal {
     3         name: string;
     4         eat(): void;
     5     }
     6 
     7     export class Dog implements Animal {
     8         name: string;
     9         constructor(theName: string) {
    10             this.name = theName;
    11         }
    12 
    13         eat() {
    14             console.log(`${
        this.name} 吃狗粮。`);
    15         }
    16     }
    17 
    18     export class Cat implements Animal {
    19         name: string;
    20         constructor(theName: string) {
    21             this.name = theName;
    22         }
    23 
    24         eat() {
    25             console.log(`${
        this.name} 吃猫粮。`);
    26         }
    27     }
    28 }
    29 
    30 
    31 let dog: Biology.Animal;
    32 dog = new Biology.Dog('狗狗');
    33 dog.eat();

![复制代码][copycode.gif]

通过namespace关键字声明命名空间，通过export导出需要在外部使用的对象。在命名空间外部需要通过“完全限定名”访问这些对象。

### 二、命名空间的引用 ###

通常情况下，声明的命名空间代码和调用的代码不在同一个文件里

biology.ts

![ContractedBlock.gif][]  biology.ts

app.ts

1 /// <reference path="biology.ts" />
    2 
    3 let dog: Biology.Animal;
    4 dog = new Biology.Dog('狗狗');
    5 dog.eat();

通过reference注释引用命名空间，即可通过“完全限定名”进行访问。

更有甚者，相同的命名空间会声明在不同的文件中

![ContractedBlock.gif][]  biology.ts

![ContractedBlock.gif][]  dog.ts

![ContractedBlock.gif][]  cat.ts

![复制代码][copycode.gif]

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();

![复制代码][copycode.gif]

编译之后，每一个文件都将编译成对应的一个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文件内，编译后的文件内容如下

![复制代码][copycode.gif]

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 = {}));

![复制代码][copycode.gif]

### 三、命名空间的别名 ###

在引用命名空间时，可以通过import关键字起一个别名

![复制代码][copycode.gif]

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();

![复制代码][copycode.gif]

### 四、命名空间与模块 ###

命名空间：代码层面的归类和管理。将有相似功能的代码都归一到同一个空间下进行管理，方便其他代码引用。更多的是侧重代码的复用。

模块：一个完整功能的封装，对外提供的是一个具有完整功能的功能包，需要显式引用。一个模块里可能会有多个命名空间。

###### 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出作者名和原文连接，否则保留追究法律责任的权利。 ######

[copycode.gif]: /images/20220527/2a06f549b4ec48e6b7b925edda4872aa.png
[ContractedBlock.gif]: /images/20220527/e28da78de5054220a4d3b5c88dd8a05a.png