备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

开心档之TypeScript 模块

2023-10-26 30
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 开心档之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
13 1
童小纯
|
3月前
|
JavaScript 前端开发 编译器
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解（学习总结---从入门到深化）
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解（学习总结---从入门到深化）
童小纯
66 0
iOS学霸
|
7月前
|
JavaScript 前端开发
开心档之TypeScript 命名空间
开心档之TypeScript 命名空间
iOS学霸
32 0
1941623231718325
|
8天前
|
JavaScript IDE 编译器
TypeScript中模块路径解析与配置：深入剖析与最佳实践
【4月更文挑战第23天】本文深入探讨了TypeScript中模块路径解析的原理与配置优化，包括相对路径、Node.js模块解析和路径别名。通过配置`baseUrl`、`paths`、`rootDirs`以及避免裸模块名，可以提升开发效率和代码质量。建议使用路径别名增强代码可读性，保持路径结构一致性，并利用IDE插件辅助开发。正确配置能有效降低维护成本，构建高效可维护的代码库。
1941623231718325
14 0
山河亦问安
|
4月前
|
前端开发 JavaScript 测试技术
Vue3+Vite+TypeScript常用项目模块详解（下）
现在无论gitee还是github，越来越多的前端开源项目采用Vue3+Vite+TypeScript+Pinia+Elementplus+axios+Sass(css预编译语言等），其中还有各种项目配置比如eslint 校验代码工具配置等等，而我们想要进行前端项目的二次开发，就必须了解会使用这些东西，所以作者写了这篇文章进行简单的介绍。
山河亦问安
52 0
山河亦问安
|
4月前
|
JavaScript 前端开发 API
Vue3+Vite+TypeScript常用项目模块详解
现在无论gitee还是github，越来越多的前端开源项目采用Vue3+Vite+TypeScript+Pinia+Elementplus+axios+Sass(css预编译语言等），其中还有各种项目配置比如eslint 校验代码工具配置等等，而我们想要进行前端项目的二次开发，就必须了解会使用这些东西，所以作者写了这篇文章进行简单的介绍。
山河亦问安
63 0
Vue3+Vite+TypeScript常用项目模块详解
童小纯
|
4月前
|
JavaScript 前端开发 编译器
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解（学习总结---从入门到深化）（下）
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解（学习总结---从入门到深化）
童小纯
28 0
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解（学习总结---从入门到深化）（下）
童小纯
|
4月前
|
JavaScript
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解（学习总结---从入门到深化）（上）
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解（学习总结---从入门到深化）
童小纯
32 0
wljslmz
|
5月前
|
JavaScript 前端开发 编译器
什么是TypeScript模块？为啥那么重要？
什么是TypeScript模块？为啥那么重要？
wljslmz
58 0
1941623231718325
|
8天前
|
JavaScript 编译器
TypeScript中类型守卫：缩小类型范围的艺术
【4月更文挑战第23天】TypeScript中的类型守卫是缩小类型范围的关键技术，它帮助我们在运行时确保值的精确类型，提升代码健壮性和可读性。类型守卫包括`typeof`（检查原始类型）、`instanceof`（检查类实例）和自定义类型守卫。通过这些方法，我们可以更好地处理联合类型、泛型和不同数据源，降低运行时错误，提高代码质量。
1941623231718325
16 2

热门文章

最新文章

  • 1
    设置WebStorm像VSCode一样每行代码结尾自动格式化加入“；”分号（JavaScript、TypeScript格式化）
  • 2
    vite+typescript从入门到实战(二）
  • 3
    TypeScript极速入门笔记1
  • 4
    TypeScript基础知识点
  • 5
    TypeScript中装饰器的概念与使用场景
  • 6
    TypeScript中模块路径解析与配置：深入剖析与最佳实践
  • 7
    TypeScript基本数据类型详解
  • 8
    TypeScript和JavaScript有什么不同？
  • 9
    TypeScript中的高级类型：联合类型、交叉类型与条件类型深入解析
  • 10
    007 Umi 使用 TypeScript 提升开发者体验
  • 1
    TypeScript 中的高级类型转换技术：映射类型、条件类型和类型推断
    26
  • 2
    TypeScript 中类型转换的终极指南：从零到深入
    31
  • 3
    使用React、TypeScript和Ant Design构建现代化前端应用
    28
  • 4
    在Vue中使用TypeScript的常见问题有哪些？
    29
  • 5
    在Vue中使用TypeScript的优缺点是什么？
    15
  • 6
    在 Vue 中如何使用 TypeScript？
    16
  • 7
    LocalStorage/sessionStorage 封装 - 基于TypeScript
    22
  • 8
    react+typescript通过window.xxx挂载属性报错的解决方案
    34
  • 9
    从零开始搭建react+typescript+antd+redux+less+vw自适应项目
    52
  • 10
    react+typescript接入百度地图
    45

    • 相关课程

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

    • 相关电子书

    更多
  • 现代TypeScript高级教程
  • JS零基础入门教程（上册）
  • Python第五讲——关于爬虫如何做js逆向的思路

    • 相关实验场景

    更多
  • 对象和接口-1：对象类型
  • 函数类型-1：基本语法
  • 常见类型-1：空，联合，枚举
  • 常见类型-2：数组和元组
  • 语言入门-2：基本类型
  • 语言入门-1：环境构建
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考