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)

打印页面