typescript - 7.模塊

咱們能夠把一些公共的功能單獨抽離成一個文件做爲一個模塊。
模塊裏面的變量 函數 類等默認是私有的，若是咱們要在外部訪問模塊裏面的數據（變量、函數、類），
咱們須要經過export暴露模塊裏面的數據（變量、函數、類...）。
暴露後咱們經過 import 引入模塊就可使用模塊裏面暴露的數據（變量、函數、類

模塊是自聲明的；兩個模塊之間的關係是經過在文件級別上使用imports和exports創建的。

導出

導出聲明

任何聲明（好比變量，函數，類，類型別名或接口）都可以經過添加export關鍵字來導出。

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

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

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

導出語句

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

導入

模塊的導入操做與導出同樣簡單。 可使用如下 import形式之一來導入其它模塊中的導出內容。

導入一個模塊中的某個導出內容

import { ZipCodeValidator } from "./ZipCodeValidator";

    let myValidator = new ZipCodeValidator();

能夠對導入內容重命名

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

將整個模塊導入到一個變量，並經過它來訪問模塊的導出部分

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

具備反作用的導入模塊

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

import "./my-module.js";

默認導出

每一個模塊均可以有一個default導出。 默認導出使用 default關鍵字標記；而且一個模塊只可以有一個default導出。 須要使用一種特殊的導入形式來導入 default導出。

default導出十分便利。 好比，像JQuery這樣的類庫可能有一個默認導出 jQuery或$，而且咱們基本上也會使用一樣的名字jQuery或$導出JQuery。

JQuery.d.ts

declare let $: JQuery;
export default $;

App.ts

import $ from "JQuery";

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

類和函數聲明能夠直接被標記爲默認導出。 標記爲默認導出的類和函數的名字是能夠省略的。
StaticZipCodeValidator.ts

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

export default function (s: string) {
    return s.length === 5 && numberRegexp.test(s);
}

Test.ts

import validate from "./StaticZipCodeValidator";

let strings = ["Hello", "98052", "101"];

// Use function validate
strings.forEach(s => {
  console.log(`"${s}" ${validate(s) ? " matches" : " does not match"}`);
});

default導出也能夠是一個值

OneTwoThree.ts

export default "123";

Log.ts

import num from "./OneTwoThree";

console.log(num); // "123"

export = 和 import = require()

CommonJS和AMD的環境裏都有一個exports變量，這個變量包含了一個模塊的全部導出內容。
CommonJS和AMD的exports均可以被賦值爲一個對象, 這種狀況下其做用就相似於 es6 語法裏的默認導出，即 export default語法了。雖然做用類似，可是 export default 語法並不能兼容CommonJS和AMD的exports。

爲了支持CommonJS和AMD的exports, TypeScript提供了export =語法。

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

若使用export =導出一個模塊，則必須使用TypeScript的特定語法import module = require("module")來導入此模塊。

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

test.ts

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

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

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

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

案例