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

开心档之TypeScript 模块

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

得到以下 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
前端开发
关键词：
TypeScript模块
TypeScript开心
iOS学霸
目录
相关文章
1941623231718325
|
8月前
|
JavaScript
TypeScript中模块的导入与导出技术详解
【4月更文挑战第23天】TypeScript模块化通过`export`和`import`实现代码组织。导出包括变量、函数、类、接口，支持命名导出和默认导出。导入时，命名导出使用花括号指定成员，默认导出直接引用，还可使用`as`重命名。模块机制促进代码复用、解耦，提升可维护性。理解并运用这些技术对构建大型应用至关重要。
1941623231718325
250 1
童小纯
|
8月前
|
JavaScript 前端开发 编译器
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解（学习总结---从入门到深化）
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解（学习总结---从入门到深化）
童小纯
147 0
众所周知
|
2月前
|
设计模式 JavaScript 安全
TypeScript性能优化及代码质量提升的重要性、方法与策略，包括合理使用类型注解、减少类型断言、优化模块导入导出、遵循编码规范、加强代码注释等
本文深入探讨了TypeScript性能优化及代码质量提升的重要性、方法与策略，包括合理使用类型注解、减少类型断言、优化模块导入导出、遵循编码规范、加强代码注释等，旨在帮助开发者在保证代码质量的同时，实现高效的性能优化，提升用户体验和项目稳定性。
众所周知
53 6
德国都芳最好
|
4月前
|
JavaScript
TypeScript 详解之 TypeScript 模块
TypeScript 详解之 TypeScript 模块
德国都芳最好
41 5
广州爱奇迪-伍华聪
|
5月前
|
开发框架 JSON 缓存
基于SqlSugar的开发框架循序渐进介绍（22）-- Vue3+TypeScript的前端工作流模块中实现统一的表单编辑和表单详情查看处理
基于SqlSugar的开发框架循序渐进介绍（22）-- Vue3+TypeScript的前端工作流模块中实现统一的表单编辑和表单详情查看处理
广州爱奇迪-伍华聪
78 2
DieHunter1024
|
6月前
|
JavaScript 编译器 开发者
TypeScript（十二）模块
TypeScript（十二）模块
DieHunter1024
49 0
艾尼麻麻
|
7月前
|
JavaScript 编译器 开发者
32.【TypeScript 教程】模块
32.【TypeScript 教程】模块
艾尼麻麻
42 0
1941623231718325
|
8月前
|
JavaScript IDE 编译器
TypeScript中模块路径解析与配置：深入剖析与最佳实践
【4月更文挑战第23天】本文深入探讨了TypeScript中模块路径解析的原理与配置优化，包括相对路径、Node.js模块解析和路径别名。通过配置`baseUrl`、`paths`、`rootDirs`以及避免裸模块名，可以提升开发效率和代码质量。建议使用路径别名增强代码可读性，保持路径结构一致性，并利用IDE插件辅助开发。正确配置能有效降低维护成本，构建高效可维护的代码库。
1941623231718325
309 0
山河亦问安
|
8月前
|
JavaScript 前端开发 API
Vue3+Vite+TypeScript常用项目模块详解
现在无论gitee还是github，越来越多的前端开源项目采用Vue3+Vite+TypeScript+Pinia+Elementplus+axios+Sass(css预编译语言等），其中还有各种项目配置比如eslint 校验代码工具配置等等，而我们想要进行前端项目的二次开发，就必须了解会使用这些东西，所以作者写了这篇文章进行简单的介绍。
山河亦问安
163 0
Vue3+Vite+TypeScript常用项目模块详解
山河亦问安
|
8月前
|
前端开发 JavaScript 测试技术
Vue3+Vite+TypeScript常用项目模块详解（下）
现在无论gitee还是github，越来越多的前端开源项目采用Vue3+Vite+TypeScript+Pinia+Elementplus+axios+Sass(css预编译语言等），其中还有各种项目配置比如eslint 校验代码工具配置等等，而我们想要进行前端项目的二次开发，就必须了解会使用这些东西，所以作者写了这篇文章进行简单的介绍。
山河亦问安
166 0

热门文章

最新文章

  • 1
    Eliza：TypeScript 版开源 AI Agent 开发框架，快速搭建智能、个性的 Agents 系统
  • 2
    前端项目代码规范工具 (ESLint. Prettier. Stylelint. TypeScript)
  • 3
    异步请求在TypeScript网络爬虫中的应用
  • 4
    Chrome浏览器实例的TypeScript自动化脚本
  • 5
    nodejs 不支持 typescript （...paramName:any[]）剩余参数。变相支持方式。
  • 6
    TypeScript的概要和简介
  • 7
    Vue3+TS系统学习一 - 邂逅Vue3和TypeScript
  • 8
    【利用AI刷面试题】AI：十道不常见的TypeScript面试题（一）
  • 9
    【typescript入门手册】枚举
  • 10
    ts重点学习46-接口与类型别名得异同
  • 1
    TypeScript中的“as”语法是什么？
    53
  • 2
    TypeScript 学习笔记
    67
  • 3
    【Web 前端】TypeScript 中的接口是什么？
    83
  • 4
    【Web 前端】TypeScript 的内置数据类型有哪些？
    150
  • 5
    【Web 前端】使用 TypeScript 有什么好处？
    141
  • 6
    【Web 前端】TypeScript 的特点是什么？
    167
  • 7
    【Web 前端】什么是 TypeScript ？
    90
  • 8
    【JavaScript 与 TypeScript 技术专栏】JavaScript 与 TypeScript 的未来发展趋势
    200
  • 9
    【JavaScript与TypeScript技术专栏】TypeScript如何帮助JavaScript开发者避免常见错误
    64
  • 10
    【JavaScript与TypeScript技术专栏】使用TypeScript优化JavaScript应用性能
    115

    • 相关课程

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

    • 相关电子书

    更多
  • 现代TypeScript高级教程
  • JS零基础入门教程（上册）
  • 用RxSwift写易维护易读的愉悦代码

    • 相关实验场景

    更多
  • 对象和接口-1：对象类型
  • 函数类型-1：基本语法
  • 常见类型-1：空，联合，枚举
  • 常见类型-2：数组和元组
  • 语言入门-2：基本类型
  • 语言入门-1：环境构建
    • 下一篇
    DataWorks智能交互式数据开发与分析之旅