南宁企业网站设计公司网站开发人员离职后修改公司网站
目录
内部模块
内部模块语法（旧）
命名空间语法（新）
两种情况下生成的 JavaScript 是相同的
外部模块
选择模块加载器
定义外部模块
句法
例子
文件：IShape.js
文件：Circle.js
文件：Triangle.js
文件：TestShape.js
文件：Circle.js
文件：Triangle.js
文件：TestShape.js
输出
模块的设计理念是组织用 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>) 完成的。但这是不可扩展的，因为它在加载模块时非常线性。这意味着没有加载模块的异步选项，而不是一个接一个地加载文件。当你为服务器编写 js 代码（例如 NodeJs）时，你甚至没有脚本标签。
从单个主 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)