这是我自己做的网站吗,网站建设伍金手指下拉8,贵阳网站建设建站系统,wordpress母公司目录
内部模块
内部模块语法#xff08;旧#xff09;
命名空间语法#xff08;新#xff09;
两种情况下生成的 JavaScript 是相同的
外部模块
选择模块加载器
定义外部模块
句法
例子
文件#xff1a;IShape.js
文件#xff1a;Circle.js
文件#xff1a;…目录
内部模块
内部模块语法旧
命名空间语法新
两种情况下生成的 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(xy); }
}
命名空间语法新
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)
