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>)完成的.但这不是可扩展的，因为它在加载模块时非常线性.这意味着不是一个接一个地加载文件，而是没有加载模块的异步选项.当您为服务器编程js时，例如NodeJ，你甚至没有脚本标签.

有两种情况可以从一个单独加载dependents js 文件主要JavaScript文件.

• 客户端 -  RequireJs

• 服务器端 -  NodeJs

选择模块加载器

为了支持加载外部JavaScript文件，我们需要一个模块加载器.这将是另一个 js 库.对于浏览器，最常用的库是RequieJS.这是AMD(异步模块定义)规范的实现. AMD不是一个接一个地加载文件，而是可以单独加载它们，即使它们彼此依赖也是如此.

定义外部模块

在针对CommonJS或AMD的TypeScript中定义外部模块时，每个文件都被视为一个模块.所以在外部模块中使用内部模块是可选的.

如果要将TypeScript从AMD迁移到CommonJs模块系统，则无需额外的工作.您需要更改的唯一内容就是编译器标志与JavaScript不同，从CommonJs迁移到AMD或者反之亦然.

声明外部模块的语法是使用关键字'export'和'import'.

语法

 //FileName:SomeInterface.ts  export interface SomeInterface {//代码声明}

要在另一个文件中使用声明的模块，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.10define(["require", "exports"], function (require, exports) {});

文件:Circle.js

//Generated by typescript 1.8.10define(["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.10define(["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.10define(["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.10var 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.10var 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.10var 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)