TypeScript学习笔记(七):模块

时间:2022-03-29 14:29:47

JavaScript中的模块

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

模块的好处

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

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

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

 var MyModule = function(name)
{
//这里定义的都是私有的成员
var myName = name;
var age = 25; //这里返回一个对象, 使用 JS 的闭包实现类的效果
return {
//这里都是公开的成员
show:function()
{
alert(myName + ":" + age);
}
};
} //创建一个实例
var obj = new MyModule("LiLei");
obj.show();

TypeScript中的模块

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

 module Validation
{
export interface StringValidator
{
isAcceptable(s: string): boolean;
} var lettersRegexp = /^[A-Za-z]+$/;
var numberRegexp = /^[0-9]+$/; export class LettersOnlyValidator implements StringValidator
{
isAcceptable(s: string)
{
return lettersRegexp.test(s);
}
} export class ZipCodeValidator implements StringValidator
{
isAcceptable(s: string)
{
return s.length === 5 && numberRegexp.test(s);
}
}
} function run()
{
// Some samples to try
var strings = ['Hello', '98052', '101'];
// Validators to use
var validators: { [s: string]: Validation.StringValidator; } = {};
validators['ZIP code'] = new Validation.ZipCodeValidator();
validators['Letters only'] = new Validation.LettersOnlyValidator();
// Show whether each string passed each validator
strings.forEach(s =>
{
for (var name in validators)
{
console.log('"' + s + '" ' + (validators[name].isAcceptable(s) ? ' matches ' : ' does not match ') + name);
}
});
} run();

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

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

我们看看对应的js文件:

 var Validation;
(function (Validation) {
var lettersRegexp = /^[A-Za-z]+$/;
var numberRegexp = /^[0-9]+$/;
var LettersOnlyValidator = (function () {
function LettersOnlyValidator() {
}
LettersOnlyValidator.prototype.isAcceptable = function (s) {
return lettersRegexp.test(s);
};
return LettersOnlyValidator;
})();
Validation.LettersOnlyValidator = LettersOnlyValidator;
var ZipCodeValidator = (function () {
function ZipCodeValidator() {
}
ZipCodeValidator.prototype.isAcceptable = function (s) {
return s.length === 5 && numberRegexp.test(s);
};
return ZipCodeValidator;
})();
Validation.ZipCodeValidator = ZipCodeValidator;
})(Validation || (Validation = {}));
function run() {
// Some samples to try
var strings = ['Hello', '98052', '101'];
// Validators to use
var validators = {};
validators['ZIP code'] = new Validation.ZipCodeValidator();
validators['Letters only'] = new Validation.LettersOnlyValidator();
// Show whether each string passed each validator
strings.forEach(function (s) {
for (var name in validators) {
console.log('"' + s + '" ' + (validators[name].isAcceptable(s) ? ' matches ' : ' does not match ') + name);
}
});
}
run();
//# sourceMappingURL=app.js.map

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