【零基础入门TypeScript】环境

news2024/11/15 2:03:50

目录

定义环境

句法

例子



环境声明是告诉 TypeScript 编译器实际源代码存在于其他地方的一种方式。当您使用大量第三方js库(如 jquery/angularjs/nodejs)时,您无法在 TypeScript 中重写它。对于 TypeScript 程序员来说,在使用这些库时确保类型安全和智能感知将是一个挑战。环境声明有助于将其他js库无缝集成到 TypeScript 中。

定义环境

按照惯例,环境声明保存在具有以下扩展名 (d.ts) 的类型声明文件中

Sample.d.ts

上面的文件不会被转编译为 JavaScript。它将用于类型安全和智能感知。

声明环境变量或模块的语法如下 -

句法

declare module Module_Name {
}

环境文件应在客户端 TypeScript 文件中引用,如下所示 -

/// <reference path = " Sample.d.ts" />

例子

让我们通过一个例子来理解这一点。假设您获得了一个第三方 javascript 库,其中包含与此类似的代码。


FileName: CalcThirdPartyJsLib.js 
var TutorialPoint;  
(function (TutorialPoint) {  
   var Calc = (function () { 
      function Calc() { 
      } 
      Calc.prototype.doSum = function (limit) {
         var sum = 0; 
         
         for (var i = 0; i <= limit; i++) { 
            Calc.prototype.doSum = function (limit) {
               var sum = 0; 
               
               for (var i = 0; i <= limit; i++) { 
                  sum = sum + i; 
                  return sum; 
                  return Calc; 
                  TutorialPoint.Calc = Calc; 
               })(TutorialPoint || (TutorialPoint = {})); 
               var test = new TutorialPoint.Calc();
            }
         }
      }
   }
}   

作为打字稿程序员,您将没有时间将此库重写为打字稿。但您仍然需要使用类型安全的 doSum() 方法。您可以做的是环境声明文件。让我们创建一个环境声明文件 Calc.d.ts


FileName: Calc.d.ts 
declare module TutorialPoint { 
   export class Calc { 
      doSum(limit:number) : number; 
   }
}

环境文件将不包含实现,它只是类型声明。现在需要将声明包含在打字稿文件中,如下所示。


FileName : CalcTest.ts  
/// <reference path = "Calc.d.ts" /> 
var obj = new TutorialPoint.Calc(); 
obj.doSum("Hello"); // compiler error 
console.log(obj.doSum(10));

以下代码行将显示编译器错误。这是因为在声明文件中我们指定输入参数将为数字。


obj.doSum("Hello");

注释上面的行并使用以下语法编译程序 -

tsc CalcTest.ts

编译时,它将生成以下 JavaScript 代码(CalcTest.js)。


//Generated by typescript 1.8.10
/// <reference path = "Calc.d.ts" />
var obj = new TutorialPoint.Calc();

// obj.doSum("Hello");
console.log(obj.doSum(10));

为了执行代码,我们添加一个带有脚本标签的 html 页面,如下所示。添加编译好的CalcTest.js文件和第三方库文件CalcThirdPartyJsLib.js。

<html> 
   <body style = "font-size:30px;"> 
      <h1>Ambient Test</h1> 
      <h2>Calc Test</h2> 
   </body> 
   
   <script src = "CalcThirdPartyJsLib.js"></script> 
   <script src = "CalcTest.js"></script> 
</html>

它将显示以下页面 -

环境声明

在控制台上,您可以看到以下输出 -

55

同样,您可以根据您的要求将 jquery.d.ts 或 angular.d.ts 集成到项目中。

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

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

相关文章

18.AVL树的模拟实现

前面对map/multimap/set/multiset进行了简单的介绍&#xff0c;在其文档介绍中发现&#xff0c;这几个容器有个共同点是&#xff1a;其底层都是按照二叉搜索树来实现的&#xff0c;但是二叉搜索树有其自身的缺陷&#xff0c;假如往树中插入的元素有序或者接近有序&#xff0c;二…

阳光能源,创造永远:光模块的未来”:随着大数据、区块链、云计算和5G的发展,光模块成为满足不断增长的数据流量需求的关键技术

光模块的类型介绍&#xff1a; 为了适应不同的应用需求&#xff0c;不同参数和功能的光模块应运而生。光模块的分类方式及类型详见如下&#xff1a; &#x1f50e;封装形式&#x1f50d;&#xff1a; &#x1f4e3;&#x1f4e2;光模块按照封装形式来分有以下几种常见类型&a…

IPEmotion 2024 R1支持通过USB2ETH适配器连接外部调制解调器

新发布的IPEmotion 2024 R1增加了很多新功能&#xff0c;其中最重要的新功能包括&#xff1a;支持使用USB2ETH适配器连接外部调制解调器&#xff1b;用户自定义的制冷剂可在IPEmotion PC中使用&#xff1b;支持使用XML或JSON文件为IPEconverter定义复杂的转换任务。 — 创新成果…

Redis篇:缓存更新策略最佳实践

前景&#xff1a; 缓存更新是redis为了节约内存而设计出来的一个东西&#xff0c;主要是因为内存数据宝贵&#xff0c;当我们向redis插入太多数据&#xff0c;此时就可能会导致缓存中的数据过多&#xff0c;所以redis会对部分数据进行更新&#xff0c;或者把他叫为淘汰更合适&a…

mysql索引最左匹配原则的理解?(绝对牛逼)

前言 测试的时候就发现不对劲 CREATE TABLE student (id int(11) NOT NULL AUTO_INCREMENT,name varchar(255) DEFAULT NULL,cid int(11) DEFAULT NULL,PRIMARY KEY (id),KEY name_cid_INX (name,cid),KEY name_INX (name) ) ENGINEInnoDB AUTO_INCREMENT8 DEFAULT CHARSETut…

vue封装请求、合并js、合并多个js

vue封装请求、合并js、合并多个js 作为一个后端开发&#xff0c;写前端时发现&#xff0c;每次导入api接口都会有一堆代码&#xff0c;像下面这样&#xff1a; import {footprintList, footprintDelete} from /api/userApi.js import {addressList} from /api/userApi.js impor…

CPU资源控制

一、CPU资源控制定义 cgroups&#xff08;control groups&#xff09;是一个非常强大的linux内核工具&#xff0c;他不仅可以限制被namespace隔离起来的资源&#xff0c; 还可以为资源设置权重、计算使用量、操控进程启停等等。 所以cgroups&#xff08;control groups&#xf…

西圣、小米、倍思开放式耳机好用吗?详细测评对比性能王者

身为一名在数码科技领域有着丰富经验的测评师&#xff0c;我深入接触过各种开放式耳机。在众多开放式耳机品牌中&#xff0c;西圣、小米和倍思三款产品以其出色的性能和独特的设计&#xff0c;受到市场的广泛议论&#xff0c;今天我将为大家带来这三款开放式耳机的详细测评对比…

最新AI创作系统ChatGPT网站源码Midjourney-AI绘画系统,Suno-v3-AI音乐生成大模型。

一、前言 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;那么如何搭建部署AI创作ChatGPT&#xff1f;小编这里写一个详细图文教程吧。已支持GPT…

Laravel 6 - 第十二章 控制器

​ 文章目录 Laravel 6 - 第一章 简介 Laravel 6 - 第二章 项目搭建 Laravel 6 - 第三章 文件夹结构 Laravel 6 - 第四章 生命周期 Laravel 6 - 第五章 控制反转和依赖注入 Laravel 6 - 第六章 服务容器 Laravel 6 - 第七章 服务提供者 Laravel 6 - 第八章 门面 Laravel 6 - …

javaScript基础3

javaScript 一.对象1.概念2.创建对象的三种方法(1).字面量创建&#xff08;利用{}&#xff09;(2)变量、属性、函数、方法的区别(3).new Object创建(4).构造函数 3.new关键字的执行过程4.遍历对象&#xff08;for..in) 二.内置对象1.了解2.math对象3.日期对象&#xff08;构造函…

挖矿木马基础知识

文章目录 一、概述二、挖矿介绍三、挖矿的收益四、挖矿木马的传播方式漏洞利用NSA武器的使用无文件挖矿利用网页挂马暴力挖矿病毒黑吃黑 五、防范建议六、学习参考 一、概述 比特币(Bitcoin)的概念最初由中本聪在 2008年11月1日提出&#xff0c;并于 2009年1月3日正式诞生。根…

Shell全套课程2小时速通从小白变高手

1.Shell概述 1.1为什么要学shell ​ 1.看懂运维人员编写的shell脚本 ​ 2.偶尔会编写一些简单的shell程序来管理集群&#xff0c;提高开发效率 1.2 Shell介于外层应用和LInux内核之间&#xff1b;用来操作Linux内核&#xff1b; Shell是一个命令行解释器&#xff0c;它接收…

算法课程笔记——如何进制转换

python特性 八、为什么负数的补码的求法是反码1 因为负数的反码加上这个负数的绝对值正好等于1111&#xff0c;在加1&#xff0c;就是10000&#xff0c;也就是四位二进数的模&#xff0c;而负数的补码是它的绝对值的同余数&#xff0c;可以通过模减去负数的绝对值得到它的补码&…

2024最新SSL证书在线申请系统源码 | 支持API接口 支持在线付费 二开优化版

内容目录 一、详细介绍二、效果展示1.部分代码2.效果图展示 三、学习资料下载 一、详细介绍 2024最新SSL证书在线申请系统源码 | 支持API接口 支持在线付费 二开优化版 最新SSL证书在线申请系统源码 | 支持API接口 SSL证书保证网络安全的基本保障。向您介绍我们的在线生成SSL…

权威解析Spring框架九大核心功能(续篇):专业深度,不容错过

作者介绍&#xff1a;✌️大厂全栈码农|毕设实战开发&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。 推荐订阅精彩专栏 &#x1f447;&#x1f3fb; 避免错过下次更新 Springboot项目精选实战案例 更多项目&#xff1a;CSDN主页YAML墨韵 学如逆水行舟&#xff0c…

速度与激情:超高速--100G网卡篇

在数字化时代&#xff0c;信息传输的速度和效率成为了各个领域的关键。在这个快节奏的世界里&#xff0c;网络连接的快慢直接影响着工作效率、生活质量甚至是创新能力。而在网络连接技术中&#xff0c;网卡的作用举足轻重。近年来&#xff0c;随着网络技术的不断发展&#xff0…

路由引入,路由过滤,路由策略简单实验

实验要求&#xff1a; 1、按照图示配置 IP 地址&#xff0c;R1&#xff0c;R3&#xff0c;R4 上使用 1oopback 口模拟业务网段 2、R1 和 R2 运行 RIPv2&#xff0c;R2&#xff0c;R3和R4 运行 OSPF&#xff0c;各自协议内部互通 3、在 RIP 和 OSPF 间配置双向路由引入&#x…

在PostgreSQL中,如何创建一个触发器并在特定事件发生时执行自定义操作?

文章目录 解决方案示例代码1. 创建自定义函数2. 创建触发器 解释 在PostgreSQL中&#xff0c;触发器&#xff08;trigger&#xff09;是一种数据库对象&#xff0c;它能在特定的事件&#xff08;如INSERT、UPDATE或DELETE&#xff09;发生时自动执行一系列的操作。这些操作可以…

短期斩获多个访问学者邀请函|高校教师获批CSC赴伦敦大学学院

B老师申报的是2023年CSC西部/地方合作项目&#xff0c;因申报在即&#xff0c;所以时间是第一要素&#xff0c;国家定位在英国及澳大利亚。经过努力&#xff0c;我们先后获得英国布里斯托大学、伦敦大学学院及澳大利亚昆士兰大学等多个邀请函&#xff0c;最终其选择了英国伦敦大…