码云笔记前端博客
Home > TypeScript > TypeScript 模块

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
var Circle = (function () {
   function Circle() {
   }
   Circle.prototype.draw = function () {
      console.log("Cirlce is drawn");
   };
   return Circle;
})();
 
exports.Circle = Circle;</pre>
Triangle.js 文件代码:
<pre>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
var circle = require("./Circle");
var triangle = require("./Triangle");
 
function drawAllShapes(shapeToDraw) {
   shapeToDraw.draw();
}
drawAllShapes(new circle.Circle());
drawAllShapes(new triangle.Triangle());

输出结果为:

1
2
Cirlce is drawn (external module)
Triangle is drawn (external module)

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(5) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
5

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - TypeScript 模块

博客简介

码云笔记网 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记网有你更精彩!
更多博客详情请看关于博客

精彩评论