“TypeScript 模块”的版本间差异
本页内容
(创建页面,内容为“{{DISPLAYTITLE:TypeScript 模块}}20 = TypeScript 模块 = TypeScript 模块的设计理念是可以更换的组织代码。 模块是在其自身的作用域里执行,并不是在全局作用域,这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的,除非明确地使用 export 导出它们。类似地,我们必须通过 import 导入其他模块导出的变量、函数、类等。…”) |
无编辑摘要 |
||
第14行: | 第14行: | ||
模块导出使用关键字 export 关键字,语法格式如下: | 模块导出使用关键字 export 关键字,语法格式如下: | ||
<sample title="" desc="" lang=" | <sample title="" desc="" lang="typescript" hererun="1"> // 文件名 : SomeInterface.ts | ||
export interface SomeInterface { | export interface SomeInterface { | ||
// 代码部分 | // 代码部分 | ||
第20行: | 第20行: | ||
要在另外一个文件使用该模块就需要使用 import 关键字来导入: | 要在另外一个文件使用该模块就需要使用 import 关键字来导入: | ||
<sample title="" desc="" lang=" | <sample title="" desc="" lang="typescript" hererun="1"> import someInterfaceRef = require("./SomeInterface"); </sample> | ||
== | == | ||
== IShape.ts 文件代码: == | == IShape.ts 文件代码: == | ||
<sample title="" desc="" lang=" | <sample title="" desc="" lang="typescript" hererun="1"> /// <reference path = "IShape.ts" /> | ||
export interface IShape { | export interface IShape { | ||
draw(); | draw(); | ||
第32行: | 第32行: | ||
== Circle.ts 文件代码: == | == Circle.ts 文件代码: == | ||
<sample title="" desc="" lang=" | <sample title="" desc="" lang="typescript" hererun="1"> import shape = require("./IShape"); | ||
export class Circle implements shape.IShape { | export class Circle implements shape.IShape { | ||
public draw() { | public draw() { | ||
第41行: | 第41行: | ||
== Triangle.ts 文件代码: == | == Triangle.ts 文件代码: == | ||
<sample title="" desc="" lang=" | <sample title="" desc="" lang="typescript" hererun="1"> import shape = require("./IShape"); | ||
export class Triangle implements shape.IShape { | export class Triangle implements shape.IShape { | ||
public draw() { | public draw() { | ||
第50行: | 第50行: | ||
== TestShape.ts 文件代码: == | == TestShape.ts 文件代码: == | ||
<sample title="" desc="" lang=" | <sample title="" desc="" lang="typescript" hererun="1"> import shape = require("./IShape"); | ||
import circle = require("./Circle"); | import circle = require("./Circle"); | ||
import triangle = require("./Triangle"); | import triangle = require("./Triangle"); | ||
第67行: | 第67行: | ||
== IShape.js 文件代码: == | == IShape.js 文件代码: == | ||
<sample title="" desc="" lang=" | <sample title="" desc="" lang="typescript" hererun="1"> define(["require", "exports"], function (require, exports) { | ||
}); </sample> | }); </sample> | ||
== Circle.js 文件代码: == | == Circle.js 文件代码: == | ||
<sample title="" desc="" lang=" | <sample title="" desc="" lang="typescript" hererun="1"> define(["require", "exports"], function (require, exports) { | ||
var Circle = (function () { | var Circle = (function () { | ||
function Circle() { | function Circle() { | ||
第86行: | 第86行: | ||
== Triangle.js 文件代码: == | == Triangle.js 文件代码: == | ||
<sample title="" desc="" lang=" | <sample title="" desc="" lang="typescript" hererun="1"> define(["require", "exports"], function (require, exports) { | ||
var Triangle = (function () { | var Triangle = (function () { | ||
function Triangle() { | function Triangle() { | ||
第100行: | 第100行: | ||
== TestShape.js 文件代码: == | == TestShape.js 文件代码: == | ||
<sample title="" desc="" lang=" | <sample title="" desc="" lang="typescript" hererun="1"> define(["require", "exports", "./Circle", "./Triangle"], | ||
function (require, exports, circle, triangle) { | function (require, exports, circle, triangle) { | ||
第116行: | 第116行: | ||
== Circle.js 文件代码: == | == Circle.js 文件代码: == | ||
<sample title="" desc="" lang=" | <sample title="" desc="" lang="typescript" hererun="1"> var Circle = (function () { | ||
function Circle() { | function Circle() { | ||
} | } | ||
第129行: | 第129行: | ||
== Triangle.js 文件代码: == | == Triangle.js 文件代码: == | ||
<sample title="" desc="" lang=" | <sample title="" desc="" lang="typescript" hererun="1"> var Triangle = (function () { | ||
function Triangle() { | function Triangle() { | ||
} | } | ||
第141行: | 第141行: | ||
== TestShape.js 文件代码: == | == TestShape.js 文件代码: == | ||
<sample title="" desc="" lang=" | <sample title="" desc="" lang="typescript" hererun="1"> var circle = require("./Circle"); | ||
var triangle = require("./Triangle"); | var triangle = require("./Triangle"); | ||
2022年8月19日 (五) 13:33的最新版本
TypeScript 模块
TypeScript 模块的设计理念是可以更换的组织代码。
模块是在其自身的作用域里执行,并不是在全局作用域,这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的,除非明确地使用 export 导出它们。类似地,我们必须通过 import 导入其他模块导出的变量、函数、类等。
两个模块之间的关系是通过在文件级别上使用 import 和 export 建立的。
模块使用模块加载器去导入其它的模块。 在运行时,模块加载器的作用是在执行此模块代码前去查找并执行这个模块的所有依赖。 大家最熟知的JavaScript模块加载器是服务于 Node.js 的 CommonJS 和服务于 Web 应用的 Require.js。
此外还有有 SystemJs 和 Webpack。
模块导出使用关键字 export 关键字,语法格式如下:
示例
// 文件名 : SomeInterface.ts
export interface SomeInterface {
// 代码部分
}
要在另外一个文件使用该模块就需要使用 import 关键字来导入:
示例
import someInterfaceRef = require("./SomeInterface");
==
IShape.ts 文件代码:
示例
/// <reference path = "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());
使用 tsc 命令编译以上代码(AMD):
tsc --module amd TestShape.ts
得到以下 JavaScript 代码:
IShape.js 文件代码:
示例
define(["require", "exports"], function (require, exports) {
});
Circle.js 文件代码:
示例
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 文件代码:
示例
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 文件代码:
示例
define(["require", "exports", "./Circle", "./Triangle"],
function (require, exports, circle, triangle) {
function drawAllShapes(shapeToDraw) {
shapeToDraw.draw();
}
drawAllShapes(new circle.Circle());
drawAllShapes(new triangle.Triangle());
});
使用 tsc 命令编译以上代码(Commonjs):
tsc --module commonjs TestShape.ts
得到以下 JavaScript 代码:
Circle.js 文件代码:
示例
var Circle = (function () {
function Circle() {
}
Circle.prototype.draw = function () {
console.log("Cirlce is drawn");
};
return Circle;
})();
exports.Circle = Circle;
Triangle.js 文件代码:
示例
var Triangle = (function () {
function Triangle() {
}
Triangle.prototype.draw = function () {
console.log("Triangle is drawn (external module)");
};
return Triangle;
})();
exports.Triangle = Triangle;
TestShape.js 文件代码:
示例
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)