• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript学习笔记(七) - 命名空间

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

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

 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 }

一、命名空间的声明

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

将上面的例子进行修改

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

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

 

二、命名空间的引用

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

biology.ts

 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 }
biology.ts

app.ts

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

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

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

1 namespace Biology {
2     export interface Animal {
3         name: string;
4         eat(): void;
5     }
6 }
biology.ts
 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 }
dog.ts
 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 }
cat.ts
 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();

 

四、命名空间与模块

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

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Typescript-入门(配置开发环境)发布时间:2022-07-18
下一篇:
老码农绝密:使用 TS(TypeScript) 的 10 大理由发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap