TypeScript 模塊

TypeScript 模塊的設(shè)計(jì)理念是可以更換的組織代碼。

模塊是在其自身的作用域里執(zhí)行，并不是在全局作用域，這意味著定義在模塊里面的變量、函數(shù)和類等在模塊外部是不可見的，除非明確地使用 export 導(dǎo)出它們。類似地，我們必須通過(guò) import 導(dǎo)入其他模塊導(dǎo)出的變量、函數(shù)、類等。

兩個(gè)模塊之間的關(guān)系是通過(guò)在文件級(jí)別上使用 import 和 export 建立的。

模塊使用模塊加載器去導(dǎo)入其它的模塊。 在運(yùn)行時(shí)，模塊加載器的作用是在執(zhí)行此模塊代碼前去查找并執(zhí)行這個(gè)模塊的所有依賴。 大家最熟知的JavaScript模塊加載器是服務(wù)于 Node.js 的 CommonJS 和服務(wù)于 Web 應(yīng)用的 Require.js。

此外還有有 SystemJs 和 Webpack。

模塊導(dǎo)出使用關(guān)鍵字 export 關(guān)鍵字，語(yǔ)法格式如下：

// 文件名 : SomeInterface.ts 
export interface SomeInterface { 
    // 代碼部分
}

要在另外一個(gè)文件使用該模塊就需要使用 import 關(guān)鍵字來(lái)導(dǎo)入:

import someInterfaceRef = require("./SomeInterface");

1. TypeScript 模塊范例

IShape.ts 文件代碼：

/// <reference path="IShape.ts"> 
export interface IShape { 
    draw(); 
}</reference>

Circle.ts 文件代碼：

import shape = require("./IShape"); 
export class Circle implements shape.IShape { 
    public draw() { 
        console.log("Cirlce is drawn (external module)"); 
    } 
}

Triangle.ts 文件代碼：

import shape = require("./IShape"); 
export class Triangle implements shape.IShape { 
    public draw() { 
        console.log("Triangle is drawn (external module)"); 
    } 
}

TestShape.ts 文件代碼：

import shape = require("./IShape"); 
import circle = require("./Circle"); 
import triangle = require("./Triangle");  
    
function drawAllShapes(shapeToDraw: shape.IShape) {
    shapeToDraw.draw(); 
} 
    
drawAllShapes(new circle.Circle()); 
drawAllShapes(new triangle.Triangle());

使用 tsc 命令編譯以上代碼（AMD）：

tsc --module amd TestShape.ts 

得到以下 JavaScript 代碼：

define(["require", "exports"], function (require, exports) {
});

Circle.js 文件代碼：

define(["require", "exports"], function (require, exports) {
    var Circle = (function () {
        function Circle() {
        }
        Circle.prototype.draw = function () {
            console.log("Cirlce is drawn (external module)");
        };
        return Circle;
    })();
    exports.Circle = Circle;
});

Triangle.js 文件代碼：

define(["require", "exports"], function (require, exports) {
    var Triangle = (function () {
        function Triangle() {
        }
        Triangle.prototype.draw = function () {
            console.log("Triangle is drawn (external module)");
        };
        return Triangle;
    })();
    exports.Triangle = Triangle;
});

TestShape.js 文件代碼：

define(["require", "exports", "./Circle", "./Triangle"], 
    function (require, exports, circle, triangle) {
    
    function drawAllShapes(shapeToDraw) {
        shapeToDraw.draw();
    }
    drawAllShapes(new circle.Circle());
    drawAllShapes(new triangle.Triangle());
});

使用 tsc 命令編譯以上代碼（Commonjs）：

tsc --module commonjs TestShape.ts

得到以下 JavaScript 代碼：

Circle.js 文件代碼：

var Circle = (function () {
    function Circle() {
    }
    Circle.prototype.draw = function () {
        console.log("Cirlce is drawn");
    };
    return Circle;
})();
    
exports.Circle = Circle;

Triangle.js 文件代碼：

var Triangle = (function () {
    function Triangle() {
    }
    Triangle.prototype.draw = function () {
        console.log("Triangle is drawn (external module)");
    };
    return Triangle;
})();
exports.Triangle = Triangle;

TestShape.js 文件代碼：

var circle = require("./Circle");
var triangle = require("./Triangle");
    
function drawAllShapes(shapeToDraw) {
    shapeToDraw.draw();
}
drawAllShapes(new circle.Circle());
drawAllShapes(new triangle.Triangle());

輸出結(jié)果為：

Cirlce is drawn (external module)
Triangle is drawn (external module)