Typescript學習筆記（五） 模塊機制

javascript從es5以前都缺乏一種模塊機制，沒法經過js引入文件，因而requirejs等等的加載器應運而生。這些加載器的使用也並不統一，產生了amd，commonjs，umd等等的規範，各有所長，直到es6的發佈，js自身引入的模塊機制，將會在之後逐漸被應用起來。

Typescrit的模塊機制與es6的模塊基本相似，也提供了轉換爲amd，es6，umd，commonjs，system的轉換，一會咱們經過一個簡單的例子來運行一下ts的模塊。

ts特殊的內聯標籤。

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

三個斜線，reference標籤，path指向引入的文件，引入的文件呢，須要定義一個命名空間來引用定義的東西。

revence.ts

 namespace Validation {
    const ac = "abc";
    export  function a(){
        console.log("module be loaded");
    }
}

定義一個名爲Validation的命名空間，導出用export導出。這裏Validation下的a函數被導出，引用的時候就能夠用Validation.a()來引用它。

text.ts

/// <reference path="revence.ts" /> 
Validation.a();

main文件是這個text.ts,引用了revence文件。編譯器怎麼編譯它呢？

兩種方法：一，把全部的輸入文件編譯爲一個輸出文件，須要使用--outFile標記：

tsc text.ts --outFile a.js  

這樣輸出文件都會在a.js中，網頁script引入了。

　　　　二，咱們能夠編譯每個文件（默認方式），那麼每一個源文件都會對應生成一個JavaScript文件。 而後，在頁面上經過<script>標籤把全部生成的JavaScript文件按正確的順序引進來，好比：

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

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

接下來就是ts的模塊機制，而非script加載機制了。

關鍵詞：import，export。同es6。

經過export關鍵詞導出，包括interface的任何東西都會被導出。好比

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

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

export class ParseIntBasedZipCodeValidator {
    isAcceptable(s: string) {
        return s.length === 5 && parseInt(s).toString() === s;
    }
}

不用關心導出內容是什麼，反正經過export已把這些東西都導出了。

1。從新導出。as至關於重命名，from以後的是導入的地址，這至關於從./ZipCodeValidator中把ZipCodeValidator導入，重命名爲RegExpBasedZipCodeValidator再導出。記住用法便可。

// 導出原先的驗證器但作了重命名
export {ZipCodeValidator as RegExpBasedZipCodeValidator} from "./ZipCodeValidator";

2。整合導出。*至關於所有導出。下面代碼整合了3個文件，並所有導出。

export * from "./StringValidator"; // exports interface StringValidator
export * from "./LettersOnlyValidator"; // exports class LettersOnlyValidator
export * from "./ZipCodeValidator";  // exports class ZipCodeValidator

導入關鍵字是import。

import基本用法

import { ZipCodeValidator } from "./ZipCodeValidator";

let myValidator = new ZipCodeValidator();

這裏./ZipCodeValidator導出的東西里面有個名字叫ZipCodeValidator的，用它的名字導入。這裏{xxx}={123}，就是這種形式，其實用到了es6的解構賦值。不懂的轉戰es6。調用用其名字直接調用就能夠了。

1。導入重命名 

import { ZipCodeValidator as ZCV } from "./ZipCodeValidator";
let myValidator = new ZCV();

 as語法，重命名爲ZCV

2。導入所有

import * as validator from "./ZipCodeValidator";
let myValidator = new validator.ZipCodeValidator();

這裏導入了./ZipCodeValidator文件的全部導出，而不是上個例子僅導入ZipCodeValidator。as validator至關於給了全部導出一個名字，能夠理解爲全部導出的命名空間。

Tips：

儘管不推薦這麼作，一些模塊會設置一些全局狀態供其它模塊使用。 這些模塊可能沒有任何的導出或用戶根本就不關注它的導出。 使用下面的方法來導入這類模塊：

import "./my-module.js";

3。默認導出。default

好比

declare let $: JQuery;
export default $;

引用

import $ from "JQuery";

$("button.continue").html( "Next Step..." );

default只能導出一項，僅導出一個函數，或者一個接口，或者任何一個單項的東西，default是最佳實踐。由於在import的時候不指定導入的東西默認導入default。看下面這個例子

export default class ZipCodeValidator {
    static numberRegexp = /^[0-9]+$/;
    isAcceptable(s: string) {
        return s.length === 5 && ZipCodeValidator.numberRegexp.test(s);
    }
}

import validator from "./ZipCodeValidator";

let validator = new validator();

 4。export = 和 import = require()

 TypeScript模塊支持export =語法，以配合傳統的CommonJS和AMD的工做流。

export =語法定義一個模塊的導出對象。 它能夠是類，接口，命名空間，函數或枚舉。

若要導入一個使用了export =的模塊時，必須使用TypeScript提供的特定語法import let = require("module")。

let numberRegexp = /^[0-9]+$/;
class ZipCodeValidator {
    isAcceptable(s: string) {
        return s.length === 5 && numberRegexp.test(s);
    }
}
export = ZipCodeValidator;

import zip = require("./ZipCodeValidator");

// Some samples to try
let strings = ["Hello", "98052", "101"];

// Validators to use
let validator = new zip.ZipCodeValidator();

// Show whether each string passed each validator
strings.forEach(s => {
  console.log(`"${ s }" - ${ validator.isAcceptable(s) ? "matches" : "does not match" }`);
});

5。編譯爲其餘模塊標準。

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

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

UMD SimpleModule.js

(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        let 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) {
    let mod_1 = require("./mod");
    exports.t = mod_1.something + 1;
});

System SimpleModule.js

System.register(["./mod"], function(exports_1) {
    let mod_1;
    let 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 let t = something + 1;

命令行的命令就是加 --module或者-m加要編譯的規範名稱。好比編譯爲amd

tsc text.ts -m amd

用tsc --help能夠看到-m的各項參數。

高級加載

typescript的按需加載。也叫動態加載。看我博客前幾篇的webpack中，用的require.ensure作按需加載，感受比較麻煩。然而ts的按需加載的簡單得益於它的省略引用。即：

編譯器會檢測是否每一個模塊都會在生成的JavaScript中用到。 若是一個模塊標識符只在類型註解部分使用，而且徹底沒有在表達式中使用時，就不會生成require這個模塊的代碼。 省略掉沒有用到的引用對性能提高是頗有益的，並同時提供了選擇性加載模塊的能力。

這種模式的核心是import id = require("...")語句可讓咱們訪問模塊導出的類型。 模塊加載器會被動態調用（經過require）

示例：Node.js裏的動態模塊加載

declare function require(moduleName: string): any;

import { ZipCodeValidator as Zip } from "./ZipCodeValidator";

if (needZipValidation) {
    let ZipCodeValidator: typeof Zip = require("./ZipCodeValidator");
    let validator = new ZipCodeValidator();
    if (validator.isAcceptable("...")) { /* ... */ }
}

示例：require.js裏的動態模塊加載

declare function require(moduleNames: string[], onLoad: (...args: any[]) => void): void;

import { ZipCodeValidator as Zip } from "./ZipCodeValidator";

if (needZipValidation) {
    require(["./ZipCodeValidator"], (ZipCodeValidator: typeof Zip) => {
        let validator = new ZipCodeValidator();
        if (validator.isAcceptable("...")) { /* ... */ }
    });
}

只要if條件不成立，模塊是不加載的。出個簡單的例子：

text.ts

import m= require("revence");
export let t=1;;

revence.ts

export = {
    mod:1
}

編譯爲amd模塊：根本沒有引入剛纔的模塊。

define(["require", "exports"], function (require, exports) {
    exports.t = 1;
    ;
});

如今改成text.ts

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

編譯出來爲

define(["require", "exports", "revence"], function (require, exports, m) {
    exports.t = m.mod + 1;
    ;
});

模塊加載的最佳實踐

1。儘量地在頂層導出

用戶應該更容易地使用你模塊導出的內容。 嵌套層次過多會變得難以處理，所以仔細考慮一下如何組織你的代碼。

2。模塊裏避免使用命名空間

模塊中使用命名空間是沒必要要的，在模塊中導出的東西確定不能重名，而導入時使用者確定會爲其命名或者直接使用，也不存在重名，使用命名空間是多餘的。

3。若是僅導出單個 class 或 function，使用 export default。

如剛纔所說，default是比較好的實踐。

4。若是要導出多個對象，把它們放在頂層裏導出

export class SomeType { /* ... */ }
export function someFunc() { /* ... */ }

5。導入時明確地列出導入的名字

import { SomeType, SomeFunc } from "./MyThings";
let x = new SomeType();
let y = someFunc();

6。導入大量模塊時使用命名空間

注意是導入時。

export class Dog { ... }
export class Cat { ... }
export class Tree { ... }
export class Flower { ... }

import * as myLargeModule from "./MyLargeModule.ts";
let x = new myLargeModule.Dog();

7。使用從新導出進行擴展

你可能常常須要去擴展一個模塊的功能。 JS裏經常使用的一個模式是JQuery那樣去擴展原對象。 如咱們以前提到的，模塊不會像全局命名空間對象那樣去合併。 推薦的方案是不要去改變原來的對象，而是導出一個新的實體來提供新的功能。

危險信號

如下均爲模塊結構上的危險信號。從新檢查以確保你沒有在對模塊使用命名空間：

• 文件的頂層聲明是export namespace Foo { ... } （刪除Foo並把全部內容向上層移動一層）
• 文件只有一個export class或export function （考慮使用export default）
• 多個文件的頂層具備一樣的export namespace Foo { （不要覺得這些會合併到一個Foo中！）