TypeScript基礎入門之模塊(三)

轉載 TypeScript基礎入門之模塊(三)

可選模塊加載和其餘高級加載方案

在某些狀況下，您可能只想在某些條件下加載模塊。在TypeScript中，咱們能夠使用下面顯示的模式來實現此模式和其餘高級加載方案，以直接調用模塊加載器而不會丟失類型安全性。

編譯器檢測是否生成的JavaScript中使用了每一個模塊。若是模塊標識符僅用做類型註釋的一部分而從不用做表達式，則不會爲該模塊生成require調用。這種未使用的引用的省略是一種良好的性能優化，而且還容許可選地加載這些模塊。

該模式的核心思想是import id = require("...")語句使咱們可以訪問模塊公開的類型。
模塊加載器是動態調用的(經過require)，以下面的if塊所示。
這利用了參考省略優化，所以模塊僅在須要時加載。
爲了使這個模式起做用，重要的是經過導入定義的符號僅用於類型位置(即從不在將被生成到JavaScript中的位置)。
爲了保持類型安全，咱們能夠使用typeof關鍵字。
typeof關鍵字在類型位置使用時會生成值的類型，在本例中爲模塊的類型。

**示例：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 * as Zip from "./ZipCodeValidator";

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

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

declare const System: any;

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

if (needZipValidation) {
    System.import("./ZipCodeValidator").then((ZipCodeValidator: typeof Zip) => {
        var x = new ZipCodeValidator();
        if (x.isAcceptable("...")) { /* ... */ }
    });
}