1、TypeScript 模塊

TypeScript 模塊的設計理念是可以更換的組織代碼。

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

兩個模塊之間的關系是通過在文件級別上使用 import 和 export 建立的。

模塊使用模塊加載器去導入其它的模塊。 在運行時，模塊加載器的作用是在執行此模塊代碼前去查找并執行這個模塊的所有依賴。 大家最熟知的JavaScript模塊加載器是服務于 Node.js 的 CommonJS 和服務于 Web 應用的 Require.js。

此外還有有 SystemJs 和 Webpack。

模塊導出使用關鍵字 export 關鍵字，語法格式如下：

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

要在另外一個文件使用該模塊就需要使用 import 關鍵字來導入:

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

實例

鴻蒙開發文檔指導：[qr23.cn/AKFP8k]

IShape.ts 文件代碼：

/// < reference path = "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());復制

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

tsc --module amd TestShape.ts

得到以下 JavaScript 代碼：

IShape.js 文件代碼：

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());復制

輸出結果為：

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

審核編輯 黃宇