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>) 完成的。 但这是不可扩展的,因为它在加载模块时非常线性。 这意味着没有加载模块的异步选项,而不是一个接一个地加载文件。 当您为服务器编写 js(例如 NodeJ)时,您甚至没有脚本标签。
从单个主 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 代码。
File:IShape.js
//Generated by typescript 1.8.10
define(["require", "exports"], function (require, exports) {
});
File: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;
});
File: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;
});
File: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 代码。
File: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;
File: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;
File: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)