TypeScript学习笔记(七):模块

时间:2021-12-30 16:03:32

JavaScript中的模块

在学习TypeScript的模块之前我们先看看在JavaScript中的模块是如何实现的。

模块的好处

首先我们要了解使用模块的好处都有什么?

  1. 模块化、可重用;
  2. 封装变量与函数;

下面的示例为使用JavaScript实现的模块:

 1 var MyModule = function(name)
2 {
3 //这里定义的都是私有的成员
4 var myName = name;
5 var age = 25;
6
7 //这里返回一个对象, 使用 JS 的闭包实现类的效果
8 return {
9 //这里都是公开的成员
10 show:function()
11 {
12 alert(myName + ":" + age);
13 }
14 };
15 }
16
17 //创建一个实例
18 var obj = new MyModule("LiLei");
19 obj.show();

TypeScript中的模块

在TypeScript中,定义模块使用关键字module,通过模块我们可以更加有效的组织代码。比如当我们的项目越来越大时,我们把所有的类都暴露在全局命名空间下,难免会出现同名等冲突的情况,当我们使用模块后可以解决这个问题。

 1 module Validation
2 {
3 export interface StringValidator
4 {
5 isAcceptable(s: string): boolean;
6 }
7
8 var lettersRegexp = /^[A-Za-z]+$/;
9 var numberRegexp = /^[0-9]+$/;
10
11 export class LettersOnlyValidator implements StringValidator
12 {
13 isAcceptable(s: string)
14 {
15 return lettersRegexp.test(s);
16 }
17 }
18
19 export class ZipCodeValidator implements StringValidator
20 {
21 isAcceptable(s: string)
22 {
23 return s.length === 5 && numberRegexp.test(s);
24 }
25 }
26 }
27
28 function run()
29 {
30 // Some samples to try
31 var strings = ['Hello', '98052', '101'];
32 // Validators to use
33 var validators: { [s: string]: Validation.StringValidator; } = {};
34 validators['ZIP code'] = new Validation.ZipCodeValidator();
35 validators['Letters only'] = new Validation.LettersOnlyValidator();
36 // Show whether each string passed each validator
37 strings.forEach(s =>
38 {
39 for (var name in validators)
40 {
41 console.log('"' + s + '" ' + (validators[name].isAcceptable(s) ? ' matches ' : ' does not match ') + name);
42 }
43 });
44 }
45
46 run();

使用模块要注意下面几点:

  1. 使用module包含的代码被存放到指定名称的命名空间中;
  2. 模块中需要外部访问的接口和类都需要添加关键字export;
  3. 外部要使用和访问模块中的类或接口必须将命名空间也写上;

我们看看对应的js文件:

 1 var Validation;
2 (function (Validation) {
3 var lettersRegexp = /^[A-Za-z]+$/;
4 var numberRegexp = /^[0-9]+$/;
5 var LettersOnlyValidator = (function () {
6 function LettersOnlyValidator() {
7 }
8 LettersOnlyValidator.prototype.isAcceptable = function (s) {
9 return lettersRegexp.test(s);
10 };
11 return LettersOnlyValidator;
12 })();
13 Validation.LettersOnlyValidator = LettersOnlyValidator;
14 var ZipCodeValidator = (function () {
15 function ZipCodeValidator() {
16 }
17 ZipCodeValidator.prototype.isAcceptable = function (s) {
18 return s.length === 5 && numberRegexp.test(s);
19 };
20 return ZipCodeValidator;
21 })();
22 Validation.ZipCodeValidator = ZipCodeValidator;
23 })(Validation || (Validation = {}));
24 function run() {
25 // Some samples to try
26 var strings = ['Hello', '98052', '101'];
27 // Validators to use
28 var validators = {};
29 validators['ZIP code'] = new Validation.ZipCodeValidator();
30 validators['Letters only'] = new Validation.LettersOnlyValidator();
31 // Show whether each string passed each validator
32 strings.forEach(function (s) {
33 for (var name in validators) {
34 console.log('"' + s + '" ' + (validators[name].isAcceptable(s) ? ' matches ' : ' does not match ') + name);
35 }
36 });
37 }
38 run();
39 //# sourceMappingURL=app.js.map

当然TypeScript的模块还有其它的用法,可以参考:http://www.typescriptlang.org/Handbook#modules