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