前言

文章紧接上文，请先阅读：传送门

上文中，我们介绍了如何在TS里使用命名空间，来组织你的代码，其中主要用到namespace关键字，格式如下：namespace X {}

但是我们遗留了一个问题，就是如果只是一个文件，当应用变得越来越大的时候，代码会变得难以维护！因此我们会根据需要，将单文件分离到不同的文件中

那具体这么分离呢？

这就是本文要讲的内容，将单个文件分离到不同的文件中

正文

例子

还是以之前官方的的Validation的命名空间的代码为例

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

    const lettersRegexp = /^[A-Za-z]+$/;
    const 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
let strings = ["Hello", "98052", "101"];

// Validators to use
let validators: { [s: string]: Validation.StringValidator; } = {};
validators["ZIP code"] = new Validation.ZipCodeValidator();
validators["Letters only"] = new Validation.LettersOnlyValidator();

// Show whether each string passed each validator
for (let s of strings) {
    for (let name in validators) {
        console.log(`"${ s }" - ${ validators[name].isAcceptable(s) ? "matches" : "does not match" } ${ name }`);
    }
}

现在，我们把Validation命名空间分割成多个文件，如下：

分割文件

首先是Validation.ts文件，代码如下

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

然后是LettersOnlyValidator.ts文件

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

接著是ZipCodeValidator.ts文件

/// <reference path="Validation.ts" />
namespace Validation {
    const 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
let strings = ["Hello", "98052", "101"];

// Validators to use
let validators: { [s: string]: Validation.StringValidator; } = {};
validators["ZIP code"] = new Validation.ZipCodeValidator();
validators["Letters only"] = new Validation.LettersOnlyValidator();

// Show whether each string passed each validator
for (let s of strings) {
    for (let name in validators) {
        console.log(`"${ s }" - ${ validators[name].isAcceptable(s) ? "matches" : "does not match" } ${ name }`);
    }
}

尽管是不同的文件，它们仍是同一个命名空间，并且在使用的时候就如同它们在一个文件中定义的一样。 因为不同文件之间存在依赖关系，所以我们加入了引用标签来告诉编译器文件之间的关联。 测试代码保持不变

当涉及到多文件时，我们必须确保所有编译后的代码都被加载了，方式有以下几种

两种方式确保加载

1. 把所有的输入文件编译为一个输出文件

例如：

tsc --outFile sample.js Test.ts

编译器会根据源码里的引用标签自动地对输出进行排序

2. 编译每一个文件

我们可以编译每一个ts文件，然后，在页面上通过 <script>标签把所有生成的JavaScript文件按正确的顺序引进来

比如将之前的几个代码编译成对应的js文件后，引入如下:

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

END

以上就是本文的所有内容，如有问题，欢迎指正~