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)
更多建议: