TypeScript - Modules

TypeScript

---

这篇文章概括了在TypeScript中使用模块组织代码的各种方法。我们将包括内部模块和外部模块以及讨论如何恰当使用他们。我们还会介绍一些外部模块的进阶使用，并且指出一下在使用中常见的错误。

第一步

接下来从我们全篇都会使用的程序开始。我们写过一个小型的字符串验证程序，可以用来验证网页上用户输入的内容或者外部文件的数据格式。

interface StringValidator {
    isAcceptable(s: string): boolean;
}
var lettersRegexp = /^[A-Za-z]+$/;
var numberRegexp = /^[0-9]+$/;
class LettersOnlyValidator implements StringValidator {
    isAcceptable(s: string) {
        return lettersRegexp.test(s);
    }
}
class ZipCodeValidator implements StringValidator {
    isAcceptable(s: string) {
        return s.length === 5 && numberRegexp.test(s);
    }
}
// Some samples to try
var strings = ['Hello', '98052', '101'];
// Validators to use
var validators: { [s: string]: StringValidator; } = {};
validators['ZIP code'] = new ZipCodeValidator();
validators['Letters only'] = new 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);
    }
});

模块化

随着更多的验证器的添加，我们需要某种组织方案，以便我们能够很好的跟踪我们的类型，并且不需要担心和其他对象名字的冲突。现在我们把对象封装到Modules中来替代向全局的命名空间中添加大量的名字。

在例子中，我们把所有validator相关的类型移入Validation 的module中。因为我们需要在外部访问module中的类和接口，所以我们在他们前面加上了export。相反的，变量lettersRegexp和numberRegexp是内部实现逻辑，所以它们没有被输出这样就无法在外部访问到它们。在测试代码底部，我们现在需要通过名称来从外部访问module中的类型Validation.LettersOnlyValidator等。

Modularized Validators

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);
        }
    }
}
// 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);
    }
});

分离模块文件

随着程序的增长，我们需要把代码分割到很多文件中来让其更加易于维护。

现在，我们把Validation module 分割到多个文件中。虽然他们被分割了，但是它们依然包含在同一个module中，并且在使用中和声明在一个位置是一样的。因为文件之间的依赖关系，所以我们在文件开头添加了引用的标签来告诉编译器他们之间的引用关系，除此我们测试代码是没有变化的。

多文件的内部modules

Validation.ts

module Validation {
    export interface StringValidator {
        isAcceptable(s: string): boolean;
    }
}

LettersOnlyValidator.ts

/// <reference path="Validation.ts" />
module Validation {
    var lettersRegexp = /^[A-Za-z]+$/;
    export class LettersOnlyValidator implements StringValidator {
        isAcceptable(s: string) {
            return lettersRegexp.test(s);
        }
    }
}

ZipCodeValidator.ts

/// <reference path="Validation.ts" />
module Validation {
    var numberRegexp = /^[0-9]+$/;
    export class ZipCodeValidator implements StringValidator {
        isAcceptable(s: string) {
            return s.length === 5 && numberRegexp.test(s);
        }
    }
}

Test.ts

/// <reference path="Validation.ts" />
/// <reference path="LettersOnlyValidator.ts" />
/// <reference path="ZipCodeValidator.ts" />
// 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);
    }
});

如果涉及多个文件，我们需要确保所有需要编译的代码能够正确的加载。有两种方法能够使用。
第一种：我们可以使用--out 命令串联所有输入的文件编译到一个javascript文件：

tsc --out sample.js Test.ts

编译器会自动根据引用标签编译到一个js文件。你也可以详细指定文件：

tsc --out sample.js Validation.ts LettersOnlyValidator.ts ZipCodeValidator.ts Test.ts

第二种：我们也可以采用预先文件的编辑来加载多个文件，我们可以使用script tag在web页面加载来控制文件顺序，例如：
MyTestPage.html (excerpt)

<script src="Validation.js" type="text/javascript" />
<script src="LettersOnlyValidator.js" type="text/javascript" />
<script src="ZipCodeValidator.js" type="text/javascript" />
<script src="Test.js" type="text/javascript" />

Going External

Export =

Alias

Optional Module Loading and Other Advanced Loading Scenarios

Working with Other JavaScript Libraries

Pitfalls of Modules