TypeScript 模塊

模塊的設(shè)計(jì)思想是組織用TypeScript編寫的代碼。模塊大致分為：

• 內(nèi)部模塊
• 外部模塊

內(nèi)部模塊

內(nèi)部模塊出現(xiàn)在早期版本的Typescript中。這用于邏輯上將類，接口，函數(shù)分組到一個(gè)單元中，并可以在另一個(gè)模塊中導(dǎo)出。此邏輯分組在最新版本的TypeScript中稱為命名空間。因此，內(nèi)部模塊已經(jīng)過時(shí)，我們可以使用命名空間。仍然支持內(nèi)部模塊，但建議在內(nèi)部模塊上使用命名空間。

內(nèi)部模塊語法（舊）

module TutorialPoint { 
   export function add(x, y) {  
      console.log(x+y); 
   } 
}

命名空間語法（新）

namespace TutorialPoint { 
   export function add(x, y) { console.log(x + y);} 
}

在這兩種情況下生成的JavaScript是相同的

var TutorialPoint; 
(function (TutorialPoint) { 
   function add(x, y) { 
      console.log(x + y); 
   } 
   TutorialPoint.add = add; 
})(TutorialPoint || (TutorialPoint = {}));

外部模塊

TypeScript中的外部模塊用于指定并加載多個(gè)外部JS文件之間的依賴關(guān)系。如果只有使用了一個(gè)js文件，則外部模塊是不相關(guān)的。傳統(tǒng)上，JavaScript文件之間的依賴關(guān)系管理是使用瀏覽器腳本標(biāo)記（<script> </script>）完成的。但這不是可擴(kuò)展的，因?yàn)樗诩虞d模塊時(shí)非常線性。這意味著不是一個(gè)接一個(gè)地加載文件，而是沒有加載模塊的異步選項(xiàng)。當(dāng)您為服務(wù)器（例如NodeJs）編程JS時(shí)，您甚至沒有腳本標(biāo)記。

從單個(gè)主JavaScript文件加載依賴項(xiàng)js文件有兩種方案。

• 客戶端 - RequireJs
• 服務(wù)器端 - NodeJs

選擇模塊加載器

為了支持加載外部JavaScript文件，我們需要一個(gè)模塊加載器。這將是另一個(gè)js庫。對于瀏覽器，最常使用的是RequieJS庫。這是AMD（異步模塊定義）規(guī)范的實(shí)現(xiàn)。AMD不是一個(gè)接一個(gè)地加載文件，而是可以單獨(dú)加載它們，即使它們彼此依賴。

定義外部模塊

在針對CommonJS或AMD的TypeScript中定義外部模塊時(shí)，每個(gè)文件都被視為一個(gè)模塊。因此，在外部模塊中使用內(nèi)部模塊是可選的。

如果要將TypeScript從AMD遷移到CommonJs模塊系統(tǒng)，那么就不需要額外的工作。唯一需要更改的是編譯器標(biāo)記，這與JavaScript不同，從CommonJs遷移到AMD需要開銷，反之亦然。

聲明外部模塊的語法是使用關(guān)鍵字“export”和“import”。

語法

//FileName : SomeInterface.ts 
export interface SomeInterface { 
   //code declarations 
}

要在另一個(gè)文件中使用聲明的模塊，請使用import關(guān)鍵字，如下所示。僅指定文件名，不使用擴(kuò)展名。

import someInterfaceRef = require(“./SomeInterface”);

示例

讓我們用一個(gè)例子來理解這一點(diǎn)。

// IShape.ts 
export interface IShape { 
   draw(); 
}

// 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()); 

為AMD系統(tǒng)編譯主要TypeScript文件的命令是：

tsc --module amd TestShape.ts

在編譯時(shí)，它會為AMD生成一下JavaScript代碼。

文件：IShape.js

//Generated by typescript 1.8.10
define(["require", "exports"], function (require, exports) {
});

文件：Circle.js

//Generated by typescript 1.8.10
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

//Generated by typescript 1.8.10
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

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

為Commonjs系統(tǒng)編譯主要TypeScript文件的命令是

tsc --module commonjs TestShape.ts

在編譯時(shí)，它將為Commonjs生成以下JavaScript代碼。

文件：Circle.js

//Generated by typescript 1.8.10
var Circle = (function () {
   function Circle() {
   }
   Circle.prototype.draw = function () {
      console.log("Cirlce is drawn");
   };
   return Circle;
})();

exports.Circle = Circle;

文件：Triangle.js

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

文件：TestShape.js

//Generated by typescript 1.8.10
var circle = require("./Circle");
var triangle = require("./Triangle");

function drawAllShapes(shapeToDraw) {
   shapeToDraw.draw();
}
drawAllShapes(new circle.Circle());
drawAllShapes(new triangle.Triangle());

輸出

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