小白教程
所有教程
关于
Search
172.70.43.79
172.70.43.79
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“TypeScript 模块”的源代码
本页内容
上一节:
TypeScript_命名空间
下一节:
TypeScript_声明文件
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:TypeScript 模块}}[[Category:TypeScript 教程|20]] = TypeScript 模块 = TypeScript 模块的设计理念是可以更换的组织代码。 模块是在其自身的作用域里执行,并不是在全局作用域,这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的,除非明确地使用 export 导出它们。类似地,我们必须通过 import 导入其他模块导出的变量、函数、类等。 两个模块之间的关系是通过在文件级别上使用 import 和 export 建立的。 模块使用模块加载器去导入其它的模块。 在运行时,模块加载器的作用是在执行此模块代码前去查找并执行这个模块的所有依赖。 大家最熟知的JavaScript模块加载器是服务于 Node.js 的 CommonJS 和服务于 Web 应用的 Require.js。 此外还有有 SystemJs 和 Webpack。 模块导出使用关键字 export 关键字,语法格式如下: <sample title="" desc="" lang="typescript" hererun="1"> // 文件名 : SomeInterface.ts export interface SomeInterface { // 代码部分 } </sample> 要在另外一个文件使用该模块就需要使用 import 关键字来导入: <sample title="" desc="" lang="typescript" hererun="1"> import someInterfaceRef = require("./SomeInterface"); </sample> == == IShape.ts 文件代码: == <sample title="" desc="" lang="typescript" hererun="1"> /// <reference path = "IShape.ts" /> export interface IShape { draw(); } </sample> == Circle.ts 文件代码: == <sample title="" desc="" lang="typescript" hererun="1"> import shape = require("./IShape"); export class Circle implements shape.IShape { public draw() { console.log("Cirlce is drawn (external module)"); } } </sample> == Triangle.ts 文件代码: == <sample title="" desc="" lang="typescript" hererun="1"> import shape = require("./IShape"); export class Triangle implements shape.IShape { public draw() { console.log("Triangle is drawn (external module)"); } } </sample> == TestShape.ts 文件代码: == <sample title="" desc="" lang="typescript" hererun="1"> 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()); </sample> 使用 tsc 命令编译以上代码(AMD): <pre>tsc --module amd TestShape.ts </pre> 得到以下 JavaScript 代码: == IShape.js 文件代码: == <sample title="" desc="" lang="typescript" hererun="1"> define(["require", "exports"], function (require, exports) { }); </sample> == Circle.js 文件代码: == <sample title="" desc="" lang="typescript" hererun="1"> 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; }); </sample> == Triangle.js 文件代码: == <sample title="" desc="" lang="typescript" hererun="1"> 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; }); </sample> == TestShape.js 文件代码: == <sample title="" desc="" lang="typescript" hererun="1"> define(["require", "exports", "./Circle", "./Triangle"], function (require, exports, circle, triangle) { function drawAllShapes(shapeToDraw) { shapeToDraw.draw(); } drawAllShapes(new circle.Circle()); drawAllShapes(new triangle.Triangle()); }); </sample> 使用 tsc 命令编译以上代码(Commonjs): <pre>tsc --module commonjs TestShape.ts</pre> 得到以下 JavaScript 代码: == Circle.js 文件代码: == <sample title="" desc="" lang="typescript" hererun="1"> var Circle = (function () { function Circle() { } Circle.prototype.draw = function () { console.log("Cirlce is drawn"); }; return Circle; })(); exports.Circle = Circle; </sample> == Triangle.js 文件代码: == <sample title="" desc="" lang="typescript" hererun="1"> var Triangle = (function () { function Triangle() { } Triangle.prototype.draw = function () { console.log("Triangle is drawn (external module)"); }; return Triangle; })(); exports.Triangle = Triangle; </sample> == TestShape.js 文件代码: == <sample title="" desc="" lang="typescript" hererun="1"> var circle = require("./Circle"); var triangle = require("./Triangle"); function drawAllShapes(shapeToDraw) { shapeToDraw.draw(); } drawAllShapes(new circle.Circle()); drawAllShapes(new triangle.Triangle()); </sample> 输出结果为: <pre> Cirlce is drawn (external module) Triangle is drawn (external module) </pre>
返回至“
TypeScript 模块
”。
上一节:
TypeScript_命名空间
下一节:
TypeScript_声明文件