TypeScript基礎入門之模組(二)

摘要： 生成模組程式碼 根據編譯期間指定的模組目標，編譯器將為Node.js（CommonJS），require.js（AMD），UMD，SystemJS或ECMAScript 2015本機模組（ES6）模組載入系統生成適當的程式碼。 有關生成的程式碼中的define, requir...

生成模組程式碼

根據編譯期間指定的模組目標，編譯器將為Node.js（CommonJS），require.js（AMD），UMD，SystemJS或ECMAScript 2015本機模組（ES6）模組載入系統生成適當的程式碼。

有關生成的程式碼中的define, require 和 register呼叫的更多資訊，請參閱每個模組載入器的文件。

下面這個簡單的示例展示了匯入和匯出期間使用的名稱如何轉換為模組載入程式碼。

SimpleModule.ts

import m = require("mod");
export let t = m.something + 1;

AMD/RequireJS SimpleModule.js

define(["require", "exports", "./mod"], function (require, exports, mod_1) {
exports.t = mod_1.something + 1;
});

CommonJS/Node SimpleModule.js

var mod_1 = require("./mod");
exports.t = mod_1.something + 1;

UMD SimpleModule.js

(function (factory) {
if (typeof module === "object" && typeof module.exports === "object") {
var v = factory(require, exports); if (v !== undefined) module.exports = v;
}
else if (typeof define === "function" && define.amd) {
define(["require", "exports", "./mod"], factory);
}
})(function (require, exports) {
var mod_1 = require("./mod");
exports.t = mod_1.something + 1;
});

System SimpleModule.js

System.register(["./mod"], function(exports_1) {
var mod_1;
var t;
return {
setters:[
function (mod_1_1) {
mod_1 = mod_1_1;
}],
execute: function() {
exports_1("t", t = mod_1.something + 1);
}
}
});

Native ECMAScript 2015 modules SimpleModule.js

import { something } from "./mod";
export var t = something + 1;

簡單例項

下面，我們整合了前面【TypeScript基礎入門之模組(一)】文章中使用的Validator實現，只匯出每個模組的單個命名匯出。

要編譯，我們必須在命令列上指定模組目標。

對於Node.js，使用--module commonjs;

對於require.js，請使用--module amd。如下

tsc --module commonjs Test.ts

編譯時，每個模組將成為一個單獨的.js檔案。

與引用標記一樣，編譯器將遵循import語句來編譯依賴檔案。Validation.ts

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

ZipCodeValidator.ts

import { StringValidator } from './Validation';

export const numberRegexp = /^[0-9]+$/;

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

LettersOnlyValidator.ts

import { StringValidator } from './Validation';

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

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

Test.ts

import { StringValidator } from './Validation';
import { ZipCodeValidator } from './ZipCodeValidator';
import { LettersOnlyValidator } from './LettersOnlyValidator';

// 測試資料
let strings = ["Hello", "98052", "101"];
// 
let validators:{ [s: string]: StringValidator } = {};
validators["zip code validator"] = new ZipCodeValidator();
validators["letter validator"] = new LettersOnlyValidator();

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

編譯後執行得到如下結果

"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