【零基础入门TypeScript】模块

news2025/2/4 2:20:39

目录

内部模块

内部模块语法(旧)

命名空间语法(新)

两种情况下生成的 JavaScript 是相同的

外部模块

选择模块加载器

定义外部模块

句法

例子

文件:IShape.js

文件:Circle.js

文件:Triangle.js

文件:TestShape.js

文件:Circle.js

文件:Triangle.js

文件:TestShape.js

输出



模块的设计理念是组织用 TypeScript 编写的代码。模块大致分为 -

  • 内部模块
  • 外部模块

内部模块

内部模块出现在早期版本的 Typescript 中。这用于将类、接口、函数逻辑地分组到一个单元中,并且可以在另一个模块中导出。在最新版本的 TypeScript 中,这种逻辑分组被称为命名空间。所以内部模块已经过时了,我们可以使用命名空间。仍然支持内部模块,但建议在内部模块上使用命名空间。

内部模块语法(旧)

module TutorialPoint { 
   export function add(x, y) {  
      console.log(x+y); 
   } 
}

命名空间语法(新)

namespace TutorialPoint { 
   export function add(x, y) { console.log(x + y);} 
}

两种情况下生成的 JavaScript 是相同的


var TutorialPoint; 
(function (TutorialPoint) { 
   function add(x, y) { 
      console.log(x + y); 
   } 
   TutorialPoint.add = add; 
})(TutorialPoint || (TutorialPoint = {}));

外部模块

TypeScript 中的外部模块用于指定和加载多个外部js文件之间的依赖关系。如果只使用一个js文件,那么外部模块是不相关的。传统上,JavaScript 文件之间的依赖关系管理是使用浏览器脚本标签 (<script></script>) 完成的。但这是不可扩展的,因为它在加载模块时非常线性。这意味着没有加载模块的异步选项,而不是一个接一个地加载文件。当你为服务器编写 js 代码(例如 NodeJs)时,你甚至没有脚本标签。

从单个主 JavaScript 文件加载依赖js文件有两种情况。

  • 客户端 - RequireJs
  • 服务器端 - NodeJs

选择模块加载器

为了支持加载外部 JavaScript 文件,我们需要一个模块加载器。这将是另一个js库。对于浏览器来说,最常用的库是 RequieJS。这是 AMD(异步模块定义)规范的实现。AMD 无需逐个加载文件,而是可以单独加载所有文件,即使它们相互依赖。

定义外部模块

在针对 CommonJS 或 AMD 的 TypeScript 中定义外部模块时,每个文件都被视为一个模块。因此可以选择将内部模块与外部模块一起使用。

如果您要将 TypeScript 从 AMD 迁移到 CommonJs 模块系统,则不需要额外的工作。您唯一需要更改的只是编译器标志,与 JavaScript 不同,从 CommonJs 迁移到 AMD 会产生开销,反之亦然。

声明外部模块的语法是使用关键字“export”和“import”。

句法

//FileName : SomeInterface.ts 
export interface SomeInterface { 
   //code declarations 
}

要在另一个文件中使用声明的模块,请使用 import 关键字,如下所示。仅指定文件名,不使用扩展名。

import someInterfaceRef = require(“./SomeInterface”);

例子

让我们通过一个例子来理解这一点。

// 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()); 

为 AMD 系统编译主 TypeScript 文件的命令是 -

tsc --module amd TestShape.ts

编译时,它将为 AMD 生成以下 JavaScript 代码。

文件:IShape.js

//Generated by typescript 1.8.10
define(["require", "exports"], function (require, exports) {
});

文件:Circle.js

//Generated by typescript 1.8.10
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


//Generated by typescript 1.8.10
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


//Generated by typescript 1.8.10
define(["require", "exports", "./Circle", "./Triangle"], 
   function (require, exports, circle, triangle) {
   
   function drawAllShapes(shapeToDraw) {
      shapeToDraw.draw();
   }
   drawAllShapes(new circle.Circle());
   drawAllShapes(new triangle.Triangle());
});

为Commonjs系统编译主 TypeScript 文件的命令是

tsc --module commonjs TestShape.ts

编译时,它将为Commonjs生成以下 JavaScript 代码。

文件:Circle.js

//Generated by typescript 1.8.10
var Circle = (function () {
   function Circle() {
   }
   Circle.prototype.draw = function () {
      console.log("Cirlce is drawn");
   };
   return Circle;
})();

exports.Circle = Circle;

文件:Triangle.js

//Generated by typescript 1.8.10
var Triangle = (function () {
   function Triangle() {
   }
   Triangle.prototype.draw = function () {
      console.log("Triangle is drawn (external module)");
   };
   return Triangle;
})();
exports.Triangle = Triangle;

文件:TestShape.js


//Generated by typescript 1.8.10
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)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1599357.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Jmeter 简单的压力测试

今天我们一起利用Apache Jmeter&#xff08;一种接口测试工具&#xff09;来进行压力测试学习。压力测试主要目的是测试负载均衡的实现效果。 安装Jmeter这里就不做阐述了&#xff0c;上网下载个最新版就可以了&#xff0c;因为Jmeter是由JAVA语言开发的&#xff0c;所以安装之…

入侵检测数据预处理 特征工程 面临的问题

数据预处理 对于分类任务来说,由于原始数据可能存在异常、缺失值以及不同特征的取值范围差 异大等问题,对机器学习会产生影响,因此,在进行机器学习模型训练之前,需要先对数据 进行预处理。数据预处理的主要过程包括数据清洗、去量纲、离散化等。 1.数据清洗 对采集到的数据进行…

数据结构之单链表的相关知识点及应用

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a;数据结构 目录 链表的概念及结构 链表与顺序表的区别与优劣势 链表的分类 单链表的实现 单链表中增加节点 单链表中尾插数据 打印单链…

C语言基础(五)

C语言基础 指针野指针空地址 二级指针子函数实现两数交换总结 指针 指针是一个数据类型&#xff0c;指针是一个保存地址的数据类型 //定义变量 int a; //定义指针 int* p;//定义了一个名叫p的指针 //int与“指针”分别是修饰a和p的数据类型地址&#xff1a;内存单元的标号 指…

智能助手大比拼!5款热门思维导图软件细致评估!

思维导图是一种创造性的方法&#xff0c;集思广益&#xff0c;寻找不同想法之间的联系。如果你做得好&#xff0c;你可以为难题提出新的想法和解决方案&#xff0c;总结一篇文章或演示稿&#xff0c;让你的想法井然有序。在数字时代&#xff0c;纸质思维导图存在不能随意更改、…

我的五星工作神器Apps

大家好呀&#xff01;&#x1f44b; 今天我要来种草五款让我工作如鱼得水的神奇App&#xff0c;每一款都是我亲自试用&#xff0c;绝对良心推荐哦&#xff01;赶紧拿出小本本记下来吧&#xff01;&#x1f4dd; 1️⃣【亿可达】——软件连接器 它是一款自动化工具&#xff0c;…

深度学习知识点:卷积神经网络(CNN)

深度学习知识点&#xff1a;卷积神经网络&#xff08;CNN&#xff09; 前言卷积神经网络&#xff08;CNN&#xff09;卷积神经网络的结构Keras搭建CNN经典网络分类LeNetAlexNetAlexNet 对比LeNet 的优势&#xff1f; VGGVGG使用2个33卷积的优势在哪里&#xff1f;每层卷积是否只…

JS算法题:找到数组中第 k 大的元素

问题描述&#xff1a; 给定一个未排序的整数数组&#xff0c;找到其中第 k 大的元素。注意&#xff0c;你可以假设 k 总是有效的&#xff0c;且 1 ≤ k ≤ 数组的长度。 举个例子&#xff1a; 如果给定数组是 [3,2,1,5,6,4]&#xff0c;k 是 2&#xff0c;那么第 2 大的元素…

MedSAM环境搭建推理测试

引子 之前分享过一篇SAM&#xff08;感兴趣的&#xff0c;请移步Segment Anything&#xff08;SAM&#xff09;环境安装&代码调试_segment anything环境-CSDN博客&#xff09;环境搭建&推理测试&#xff0c;虽然话说Segment Anything&#xff0c;但是原始模型对于一些…

深入理解神经网络学习率(定义、影响因素、常见调参方法、关键代码实现)

目录 什么是学习率&#xff1f; 有哪些影响因素&#xff1f; 常用调整方法&#xff1f; 博主介绍&#xff1a;✌专注于前后端、机器学习、人工智能应用领域开发的优质创作者、秉着互联网精神开源贡献精神&#xff0c;答疑解惑、坚持优质作品共享。本人是掘金/腾讯云/阿里云等平…

自动化图像标注是否可靠?人人可尝试的方案

一、背景 随着大模型的崛起&#xff0c;多模态模型如雨后春笋一样快速发展。我们可以借助多模态大模型理解物理世界中的物体&#xff0c;在上篇文章大模型时代&#xff0c;图像描述生成&#xff08;image caption&#xff09;怎么走&#xff1f;中提到基于大模型的图像描述生成…

ADB的基本语法及常用命令

学习网址 ADB命令的基本语法如下&#xff1a; adb [-d|-e|-s <serialNumber>] <command> 如果有多个设备/模拟器连接&#xff0c;则需要为命令指定目标设备。 参数及含义如下&#xff1a; 常用命令如下&#xff1a; 1. 启动ADB服务 adb start-server 2. 停止…

上网方法介绍

注册 https://www.cordcloud.biz/user 注册后先充值&#xff0c;充值后还要购买套餐&#xff0c; 充值之后&#xff0c;就可以看到流量了&#xff0c;然后复制订阅地址&#xff0c;到客户端去自动下载 URL拷贝到这个地方&#xff0c;然后点击下载

Vue.js前端开发零基础教学(六)

学习目标 了解什么是路由&#xff0c;能够说出前端后端路由的原理 掌握多种路由的使用方法&#xff0c;能够实现路由的不同功能 掌握Vue Router的安装及基本使用方法 5.1 初始路由 提到路由&#xff08;Route),一般我们会联想到网络中常见的路由器&#xff08;Router),…

清明三天,用Python赚了4万?

每年4月&#xff0c;是Python圈子里接私活的旺季&#xff0c;特别是在节假日这种数据暴增的时间段&#xff0c;爬虫采集、逆向破解类的私活订单会集中爆发&#xff0c;量大价高。几乎所有的圈内人都在趁着旺季接私活。 正好&#xff0c;我昨天就做了一单爬虫逆向私活&#xff…

Python统计分析库之statsmodels使用详解

概要 Python statsmodels是一个强大的统计分析库,提供了丰富的统计模型和数据处理功能,可用于数据分析、预测建模等多个领域。本文将介绍statsmodels库的安装、特性、基本功能、高级功能、实际应用场景等方面。 安装 安装statsmodels库非常简单,可以使用pip命令进行安装:…

SGI_STL空间配置器源码剖析(六)deallocate函数

deallocate函数是内存释放函数。源码及注释如下&#xff1a; /* __p may not be 0 */static void deallocate(void* __p, size_t __n) // __p指向要回收的内存起始地址&#xff0c;__n表示其大小{if (__n > (size_t) _MAX_BYTES)// 大于128字节&#xff0c;普通方式开辟和回…

男生穿什么裤子最百搭?适合男生穿的裤子品牌测评分享

每个伙伴们想必经常都会选择一些裤子&#xff0c;但现在市面上的裤子品牌也实在太多了&#xff0c;好不容易选到了几件好看的裤子&#xff0c;结果质量却很不好。主要就是因为现在有太多商家为了利润而使用一些舒适性、质量差的面料&#xff0c;那么今天就给大家分享一些质量上…

RAG 如何消除大模型幻觉

什么是大模型幻觉 假设我们有一个基于大型生成模型&#xff08;如GPT-3&#xff09;的问答系统&#xff0c;该系统用于回答药企内部知识库中的问题。我们向其提出一个问题&#xff1a;“阿司匹林的主要药理作用是什么&#xff1f;” 正确的答案应该是&#xff1a;“阿司匹林主…

无人棋牌室软硬件方案

先决思考 软件这一套确实是做一套下来&#xff0c;可以无限复制卖出&#xff0c;这个雀氏是一本万利的买卖。 现在肯定是有成套的方案&#xff0c;值不值得重做&#xff1f;为什么要重做&#xff1f; 你想达到什么效果&#xff1f;还是需要细聊的。 做这个东西难度不高&…