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文件之间的依赖管理是使用浏览器脚本标签()来完成的。但这是不可扩展的,因为它在加载模块时是线性的。这意味着,加载文件时没有异步选项来加载模块。例如,当您为服务器编程js时,例如NodeJs,甚至没有脚本标签可用。
有两种场景可以从一个主JavaScript文件加载依赖的js文件:
- 客户端 – RequireJs
- 服务器端 – NodeJs
选择模块加载器
为了支持加载外部JavaScript文件,我们需要一个模块加载器。这将是另一个js库。对于浏览器,最常用的库是RequieJS。这是对AMD(异步模块定义)规范的实现。AMD可以单独加载它们,即使它们彼此依赖。
定义外部模块
当在TypeScript中定义针对CommonJS或AMD的外部模块时,每个文件都被视为一个模块。因此,在外部模块中使用内部模块是可选的。
如果您将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());
编译主要的TypeScript文件供AMD系统使用的命令是 −
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());
});
编译主要的TypeScript文件为Commonjs系统的命令为
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)