|
|
相关文章推荐
|
豪爽的生菜 · “清廉”种子在这里发芽· 9 月前 · |
|
|
刀枪不入的领结 · 我在B站跳大神：萨满文化的赛博复兴-虎嗅网· 9 月前 · |
|
|
会搭讪的键盘 · 站桩排毒身体会出的反应 - 知乎· 10 月前 · |
|
|
任性的柿子 · 刘云山：大力弘扬雷锋精神 共建文明道德风尚 ...· 11 月前 · |
|
|
很酷的跑步机 · 聊城义务教育招生中小学入学报名条件要求暂住证 ...· 1 年前 · |
TypeScript 模块
TypeScript 模块的设计理念是可以更换的组织代码。
模块是在其自身的作用域里执行，并不是在全局作用域，这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的，除非明确地使用 export 导出它们。类似地，我们必须通过 import 导入其他模块导出的变量、函数、类等。
两个模块之间的关系是通过在文件级别上使用 import 和 export 建立的。
模块使用模块加载器去导入其它的模块。 在运行时，模块加载器的作用是在执行此模块代码前去查找并执行这个模块的所有依赖。 大家最熟知的JavaScript模块加载器是服务于 Node.js 的 CommonJS 和服务于 Web 应用的 Require.js。
此外还有有 SystemJs 和 Webpack。
要在另外一个文件使用该模块就需要使用 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
(
)
)
;