TypeScript 模块

2019-06-29 分类：TypeScript 作者：码云阅读（776）

本文共计3141个字，预计阅读时长需要8分钟。

从ECMAScript 2015开始，JavaScript引入了模块的概念。TypeScript也沿用这个概念。

模块在其自身的作用域里执行，而不是在全局作用域里；这意味着定义在一个模块里的变量，函数，类等等在模块外部是不可见的，除非你明确地使用export形式之一导出它们。相反，如果想使用其它模块导出的变量，函数，类，接口等的时候，你必须要导入它们，可以使用import形式之一。

模块是自声明的；两个模块之间的关系是通过在文件级别上使用imports和exports建立的。

模块使用模块加载器去导入其它的模块。在运行时，模块加载器的作用是在执行此模块代码前去查找并执行这个模块的所有依赖。大家最熟知的JavaScript模块加载器是服务于Node.js的CommonJS和服务于Web应用的Require.js。

TypeScript与ECMAScript 2015一样，任何包含顶级import或者export的文件都被当成一个模块。相反地，如果一个文件不带有顶级的import或者export声明，那么它的内容被视为全局可见的（因此对模块也是可见的）。

TypeScript 模块

任何声明（比如变量，函数，类，类型别名或接口）都能够通过添加export关键字来导出,语法格式如下。

1
2
3
4

// 文件名 : SomeInterface.ts
export interface SomeInterface {
// 代码部分
}

要在另外一个文件使用该模块就需要使用 import 关键字来导入:

1	import someInterfaceRef = require("./SomeInterface");

实例

IShape.ts 文件代码：

1
2
3
4

/// <reference path = "IShape.ts" />
export interface IShape {
draw();
}

Circle.ts 文件代码：

1
2
3
4
5
6

import shape = require("./IShape");
export class Circle implements shape.IShape {
public draw() {
console.log("Cirlce is drawn (external module)");
}
}

Triangle.ts 文件代码：

1
2
3
4
5
6

import shape = require("./IShape");
export class Triangle implements shape.IShape {
public draw() {
console.log("Triangle is drawn (external module)");
}
}

TestShape.ts 文件代码：

1
2
3
4
5
6
7
8
9
10

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）：

1	tsc --module amd TestShape.ts

得到以下 JavaScript 代码,

IShape.js 文件代码：

1 2	define(["require", "exports"], function (require, exports) { });

Circle.js 文件代码：

1
2
3
4
5
6
7
8
9
10
11

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 文件代码：

1
2
3
4
5
6
7
8
9
10
11

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 文件代码：

1
2
3
4
5
6
7
8
9

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 文件代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

TestShape.js 文件代码：

1
2
3
4
5
6
7
8

var circle = require("./Circle");
var triangle = require("./Triangle");

function drawAllShapes(shapeToDraw) {
shapeToDraw.draw();
}
drawAllShapes(new circle.Circle());
drawAllShapes(new triangle.Triangle());

输出结果为：