TypeScript基础入门之命名空间(二)

转载 TypeScript基础入门之命名空间(二)

继续上篇文章[TypeScript基础入门之命名空间(一)]

跨文件拆分

当应用变得愈来愈大时，咱们须要将代码分离到不一样的文件中以便于维护。

多文件名称空间

如今，咱们把Validation命名空间分割成多个文件。 尽管是不一样的文件，它们还是同一个命名空间，而且在使用的时候就如同它们在一个文件中定义的同样。 由于不一样文件之间存在依赖关系，因此咱们加入了引用标签来告诉编译器文件之间的关联。 咱们的测试代码保持不变。

Validation.ts

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

LettersOnlyValidator.ts

/// <reference path="Validation.ts" />

namespace Validation {
  const letterRegexp = /^[A-Za-z]+/;

  export class LettersOnlyValidator implements StringValidator {
    isAcceptable(s: string): boolean {
      return letterRegexp.test(s);
    }
  }
}

ZipCodeValidator.ts

/// <reference path="Validation.ts" />
namespace Validation {
  export const numberRegexp = /^[0-9]+$/;

  export class ZipCodeValidator implements StringValidator {
    isAcceptable(s: string): boolean {
      return s.length === 5 && numberRegexp.test(s);
    }
  }
}

Test.ts

/// <reference path="Validation.ts" />
/// <reference path="LettersOnlyValidator.ts" />
/// <reference path="ZipCodeValidator.ts" />

// 测试数据
let strings = ["Hello", "98052", "101"];
// 
let validators:{ [s: string]: Validation.StringValidator } = {};
validators["zip code validator"] = new Validation.ZipCodeValidator();
validators["letter validator"] = new Validation.LettersOnlyValidator();

strings.forEach((e) => {
  for (let name in validators) {
    console.log(`"${e}" - ${ validators[name].isAcceptable(e) ? "matches" : 'does not match'} ${name}`)
  }
});

编译运行后的结果以下

$ tsc --outFile src/module_demo/Test.js src/module_demo/Test.ts
$ node src/module_demo/Test.js
"Hello" - does not match zip code validator
"Hello" - matches letter validator
"98052" - matches zip code validator
"98052" - does not match letter validator
"101" - does not match zip code validator
"101" - does not match letter validator

一旦涉及多个文件，咱们须要确保加载全部已编译的代码。
有两种方法能够作到这一点。
首先，咱们可使用--outFile标志使用链接输出将全部输入文件编译为单个JavaScript输出文件：

tsc --outFile sample.js Test.ts

编译器将根据文件中存在的引用标记自动排序输出文件。
您还能够单独指定每一个文件：

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

或者，咱们可使用每一个文件编译（默认）为每一个输入文件发出一个JavaScript文件。
若是生成了多个JS文件，咱们须要在咱们的网页上使用<script>标签以适当的顺序加载每一个发出的文件，例如：

<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" />