AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

开心档之TypeScript 模块

2023-05-20 78
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 开心档之TypeScript 模块

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)


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
1.

得到以下 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)
文章标签：
JavaScript
前端开发
游客knjctmbzcn7l4
目录
相关文章
前端技术栈
|
6月前
|
JavaScript 前端开发 Java
十个你必须要会的TypeScript技巧
十个你必须要会的TypeScript技巧
前端技术栈
44 1
iOS学霸
|
JavaScript 前端开发
开心档之TypeScript 对象
开心档之TypeScript 对象
iOS学霸
31 0
iOS学霸
|
存储 JavaScript 前端开发
开心档之TypeScript 元组
开心档之TypeScript 元组
iOS学霸
46 0
iOS学霸
|
JavaScript 前端开发
开心档之TypeScript 教程
开心档之TypeScript 教程
iOS学霸
49 0
iOS学霸
|
JavaScript 前端开发
开心档之TypeScript 命名空间
开心档之TypeScript 命名空间
iOS学霸
48 0
iOS学霸
|
JavaScript 前端开发
开心档之TypeScript 模块
开心档之TypeScript 模块
iOS学霸
40 0
iOS学霸
|
JavaScript 前端开发
开心档之TypeScript 联合类型
开心档之TypeScript 联合类型
iOS学霸
29 0
iOS学霸
|
存储 JavaScript 前端开发
开心档之TypeScript 变量声明
开心档之TypeScript 变量声明
iOS学霸
36 0
iOS学霸
|
JavaScript 前端开发
开心档之TypeScript 运算符
开心档之TypeScript 运算符
iOS学霸
34 0
田八
|
JavaScript 前端开发
全解析 ESM 模块语法，出去还是进来都由你说了算
模块语法是ES6的一个重要特性，它的出现让JavaScript的模块化编程成为了可能。在JavaScript中可以直接使用import和export关键字来导入和导出模块。
田八
175 0

热门文章

最新文章

  • 1
    Java 生成 UUID
  • 2
    一文读懂 Serverless 的起源、发展和落地实践
  • 3
    Fiddler抓包：下载、安装及使用
  • 4
    用CodeViz绘制函数调用关系图(call graph)
  • 5
    阿里AI上岗双11服装车间，能识别头发丝直径十分之一的瑕疵
  • 6
    SpringBoot开发案例之整合Dubbo提供者(一)
  • 7
    Dubbo架构介绍
  • 8
    警惕垃圾邮件借加沙新闻进行钓鱼攻击
  • 9
    美国博客刊文发布NetApp StoreVault停产通知
  • 10
    IntelliJ IDEA 12 创建Web项目 教程 超详细版
  • 1
    通义灵码与云计算平台的融合：基础与概述
    37
  • 2
    《深度解析：死锁的“前世今生”与防范之道》
    32
  • 3
    《探秘程序崩溃：核心转储（Core Dump）分析全攻略》
    36
  • 4
    今日 AI 开源｜共 12 项｜开源的DIY健康追踪项目，基于低成本的智能戒指构建私人的健康监测应用
    40
  • 5
    Open Interpreter：AI 赋能终端！在终端中对话AI模型进行编程，通过运行代码来完成各种计算机操作任务
    33
  • 6
    「Mac畅玩鸿蒙与硬件15」鸿蒙UI组件篇5 - Slider 和 Progress 组件
    41
  • 7
    ai断点怎么做?
    16
  • 8
    AI Shell：在命令行里“对话” AI ，微软推出将 AI 助手引入命令行的 CLI 工具，打造对话式交互命令行
    21
  • 9
    ai怎么设计迷宫字体效果?
    15
  • 10
    「Mac畅玩鸿蒙与硬件14」鸿蒙UI组件篇4 - Toggle 和 Checkbox 组件
    30

    • 相关课程

    更多
  • Vue.js完全自学手册图文教程
  • JavaScript 自学手册文档教程
  • Lua完全自学手册图文教程
  • Python完全自学手册图文教程

    • 相关电子书

    更多
  • 现代TypeScript高级教程
  • JS零基础入门教程（上册）
  • Python第五讲——关于爬虫如何做js逆向的思路
    • 下一篇
    阿里云OSS设置跨域访问