TypeScript - 模組

模組的設計理念是為了組織用 TypeScript 編寫的程式碼。模組主要分為以下兩種：

內部模組
外部模組

內部模組

內部模組出現在 TypeScript 的早期版本中。它用於將類、介面、函式邏輯地組合成一個單元，並且可以匯出到其他模組中。這種邏輯分組在最新版本的 TypeScript 中被稱為名稱空間。因此，內部模組已過時，建議使用名稱空間代替。內部模組仍然受支援，但建議使用名稱空間而不是內部模組。

內部模組語法（舊）

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 中的外部模組用於指定和載入多個外部 js 檔案之間的依賴關係。如果只使用一個 js 檔案，則外部模組不相關。傳統上，JavaScript 檔案之間的依賴關係管理是使用瀏覽器指令碼標籤 (<script></script>) 完成的。但這不可擴充套件，因為它在載入模組時非常線性。這意味著，除了按順序載入檔案之外，沒有非同步載入模組的選項。例如，當您為伺服器（例如 NodeJs）編寫 js 程式碼時，甚至沒有指令碼標籤。

從單個主 JavaScript 檔案載入依賴 js 檔案有兩種情況。

客戶端 - RequireJs
伺服器端 - NodeJs

選擇模組載入器

為了支援載入外部 JavaScript 檔案，我們需要一個模組載入器。這將是另一個 js 庫。對於瀏覽器，最常用的庫是 RequieJS。這是 AMD（非同步模組定義）規範的實現。AMD 可以分別載入所有檔案，即使它們相互依賴，而不是按順序載入檔案。

定義外部模組

在定義目標為 CommonJS 或 AMD 的 TypeScript 外部模組時，每個檔案都被視為一個模組。因此，在外部模組中使用內部模組是可選的。

如果您正在將 TypeScript 從 AMD 遷移到 CommonJs 模組系統，則無需執行任何其他操作。您只需要更改編譯器標誌。與 JavaScript 不同，從 CommonJs 遷移到 AMD 或反之亦然存在開銷。

宣告外部模組的語法是使用關鍵字“export”和“import”。

語法

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

要在另一個檔案中使用已宣告的模組，可以使用 import 關鍵字，如下所示。僅指定檔名，不使用副檔名。

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

示例

讓我們透過一個示例來了解這一點。

// 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 系統編譯主 TypeScript 檔案的命令為：

tsc --module amd TestShape.ts

編譯後，它將為 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 系統編譯主 TypeScript 檔案的命令為

tsc --module commonjs TestShape.ts

編譯後，它將為 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)

列印頁面