10.类型声明文件

news2024/12/27 13:34:04

类型声明文件的作用是 为已存在的JS库提供类型信息

目录

1  axios中的类型声明文件

2  类型声明文件与普通ts文件的区别

3  vscode中内置的类型声明文件

4  第三方库内置的类型声明文件

5  DefinitelyTyped 提供类型声明文件

6  自定义类型声明文件

6.1  创建给ts用的类型声明文件

6.2  创建给js用的类型声明文件


1  axios中的类型声明文件

我们以axios作为例子,比如这里的url,它就提示我们需要给一个字符串类型的值

有提示的原因是axios中有类型声明文件

2  类型声明文件与普通ts文件的区别

.d.ts文件就是类型声明文件。其中d的意思是declaration。

类型声明文件只能有声明代码,不能有执行代码,写了就会报错

在ts中可以有执行代码

.ts文件可以被编译为js文件。.d.ts文件不会被编译为js文件

3  vscode中内置的类型声明文件

无论你写js

还是ts

都会有关于内置方法的提示,我们可以 ctrl + 左键点击这个方法,点击后会看到lib.es5.d.ts。这个就是vscode内置的类型声明文件之一

内置文件不只有一个,当我们使用DOM的时候也有对应的内置类型声明文件

同样用ctrl+左键点击,可以看到lib.dom.d.ts文件

4  第三方库内置的类型声明文件

我们可以在下载好的包中通过 package.json 查看这个包使用的类型声明文件

除了可以使用typings这个属性,也可以使用 types 这个属性

5  DefinitelyTyped 提供类型声明文件

DefinitelyTyped是一个github仓库,项目地址 https://github.com/DefinitelyTyped/DefinitelyTyped ,在这个库中有我们常用的库的类型声明文件

有的第三方包是不自带类型声明文件的,比如lodash,我们先安装lodash

在lodash中的package.json中没有types这个属性

没有类型声明文件就没有提示

这个时候我们可以使用 DefinitelyTyped ,在安装的时候在想要安装的库前加上 @types/

下载后会在node_modules产生@types这个文件夹,里面有lodash。之前的lodash我们可以用 npm uninstall lodash 删掉,也可以不删

  • 卸载后按照下面方式导入并使用,我测过可以用

在 @types/lodash 中的package.json有类型声明文件

导入的时候我们导入 @type/lodash ,然后再写就发现有提示了

不一定所有的库在DefinitlyTyped中都有,你进入项目后点击types

打开后告诉你有7653个库能用

6  自定义类型声明文件

6.1  创建给ts用的类型声明文件

直接用export与import导出导入就行了,首先创建d.ts与ts,文件名称均自定

在index.d.ts中声明一个类型并导出

在test.ts中导入并使用

6.2  创建给js用的类型声明文件

业务代码就不要动他了,我们需要动的是工具代码,比如 格式化时间 这些

我当前有这样一个js文件

我可以把js文件导入另一个js中,然后使用。可以使用,但是没有类型约束

我们希望有类型约束,所以我们需要创建js的同名的d,ts文件

  • package.json的作用是能让终端使用import

把你希望约束的js代码给上约束

  • 想interface,type这种ts独有的关键字,如果你需要导出的话,你不需要使用declare,直接导出就行了,当然你想用declare也可以
  • js中用let声明的,那你规则就用let声明。js中用const声明的,你规则就用const声明。总之是js中用什么,你规则就用什么

之后你再就发现有提示了

并且可以正常使用

由于使用的是js,js只是有提示,但是并不会报错,如果你需要有报错的那种,你要使用ts

ts确实是有报错,但是你在最后上线的时候会麻烦一些。

如果你直接使用tsc将ts转为js是用不了的,因为tsc默认的导入方式是commonjs,我使用tsc --init整了一会儿也没整好

你也可以使用ts-loader将项目变为ts项目,这个视频是使用webpack来搞的ts项目,感兴趣可以看一下 P74 06-创建自己的类型声明文件(2为已有JS文件提供类型声明的概述)_哔哩哔哩_bilibili

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

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

相关文章

同为科技(TOWE)带热插拔功能机柜PDU插座的应用

所谓热插拔(hot-plugging或Hot Swap),即带电插拔,指的是在不关闭系统电源的情况下,将模块、板卡插入或拔出系统而不影响系统的正常工作,从而提高了系统的可靠性、快速维修性、冗余性和对灾难的及时恢复能力…

JMeter 的使用

文章目录 1. JMeter下载2. JMeter的使用2.1 JMeter中文设置2.2 JMeter的使用2.2.1 创建线程组2.2.2 HTTP请求2.2.3 监听器 1. JMeter下载 官网地址 https://jmeter.apache.org/download_jmeter.cgi https://dlcdn.apache.org//jmeter/binaries/apache-jmeter-5.6.2.zip 下载解…

Vue2 第十二节 Vue组件化编程 (二)

1. VueComponent 2. 单文件组件 一. VueComponent 组件本质上是一个名为VueComponent的构造函数&#xff0c;不是程序员定义的&#xff0c;是Vue.extend生成的只需要写<school/>或者<school><school/>&#xff0c;Vue解析时&#xff0c;会帮我们创建schoo…

ThinkPHP 6 添加跳转提示扩展 liliuwei/thinkphp-jump

liliuwei/thinkphp-jump 是 TP5 中经典跳转提示&#xff0c;在 TP6 中已经取消&#xff0c;通过 composer 下载该扩展可以在 TP6 中使用 TP5 的跳转提示操作。 安装扩展 在应用根目录执行: composer require liliuwei/thinkphp-jump引入扩展 在全局配置目录生成 jump.php 文件…

Activity的生存期

以下内容摘自郭霖《第一行代码》第三版 Activity的生存期 Activity类中定义了7个回调方法&#xff0c;覆盖了Activity生命周期的每一个环节&#xff1a; onCreate()。这个方法你已经看到过很多次了&#xff0c;我们在每个Activity中都重写了这个方法&#xff0c;它会在Activit…

安科瑞电动机保护器产品在污水处理厂的应用-安科瑞黄安南

应用场景 功能 1&#xff09;排污泵经常会出现过载、缺相等问题&#xff0c;导致电机烧坏&#xff1b; 2&#xff09;为电动机提供完善的保护&#xff0c;并具备多种事件记录追忆功能&#xff1b; 3&#xff09;全电参量测量&#xff0c;包括但不限于三相电流、三相电压、有…

11-矩阵(matrix)_方阵_对称阵_单位阵_对角阵

矩阵及其运算 [ a 11 ⋯ a 1 n ⋯ ⋯ ⋯ a m 1 ⋯ a m n ] \begin{bmatrix} a_{11} & \cdots & a_{1n} \\ \cdots & \cdots & \cdots \\ a_{m1} & \cdots & a_{mn} \\ \end{bmatrix} ​a11​⋯am1​​⋯⋯⋯​a1n​⋯amn​​ ​ 矩阵就是二维数组&…

模板(下)

文章目录 非类型模板参数 模板的特化 模板分离编译 一、非类型模板参数 模板参数分为类型形参与非类型形参。 类型形参即&#xff1a;出现在模板参数列表中&#xff0c;跟在class或者typename之类的参数类型名称。 非类型形参&#xff1a;就是用一个常量作为类(函数)模板的…

【笔试强训选择题】Day33.习题(错题)解析

作者简介&#xff1a;大家好&#xff0c;我是未央&#xff1b; 博客首页&#xff1a;未央.303 系列专栏&#xff1a;笔试强训选择题 每日一句&#xff1a;人的一生&#xff0c;可以有所作为的时机只有一次&#xff0c;那就是现在&#xff01;&#xff01;&#xff01;&#xff…

记一次 HTTPS 抓包分析和 SNI 的思考

日常听说 HTTPS 是加密协议&#xff0c;那现实中的 HTTPS 流量&#xff0c;是真的完全加密吗&#xff1f; ——答案是&#xff0c;不一定。原因嘛&#xff0c;抓个包就知道了。 我们用 curl 命令触发一下&#xff1a; curl -v https://s-api.37.com.cn/api/xxx * Trying 1…

【雕爷学编程】MicroPython动手做(27)——物联网之掌控板小程序2

知识点&#xff1a;什么是掌控板&#xff1f; 掌控板是一块普及STEAM创客教育、人工智能教育、机器人编程教育的开源智能硬件。它集成ESP-32高性能双核芯片&#xff0c;支持WiFi和蓝牙双模通信&#xff0c;可作为物联网节点&#xff0c;实现物联网应用。同时掌控板上集成了OLED…

退退退!台风“卡努”或转向!打开华为天气查看台风实时路径

近期台风频繁&#xff0c;刚送走了“杜苏芮”&#xff0c;又或将迎来第六号超强台风“卡努”。面对来势汹汹的台风&#xff0c;通勤和外出变得困难重重。为了有效抵御台风肆虐&#xff0c;大家需要做好应对措施&#xff0c;保障人身安全。 如果处于台风登陆的影响范围内&#…

莱佛士学生作品精彩亮相小马宝莉40周年艺术展

由全球领先玩乐公司孩之宝举办的“小马宝莉40周年艺术展”在上海市黄浦区淮海中路862-864号进行展出。 ▲莱佛士学生作品亮相小马宝莉40周年展 本次展览特别邀请多位国内新生代艺术家以小马宝莉为灵感缪斯开展全新创作实践&#xff0c;通过雕塑、绘画、新媒体艺术等作品讲述…

编程语言:基础知识与思维方式的演进

编程语言的基础知识差异并不大&#xff0c;因为计算机发展源于冯诺伊曼模型&#xff0c;而编程语言只是其工具之一。区别在于使用工具的思维方式。以前&#xff0c;人们让计算机做某件事&#xff0c;C语言需要清楚地描述过程&#xff0c;即面向过程。随着计算能力的提升&#x…

《吐血整理》进阶系列教程-拿捏Fiddler抓包教程(20)-Fiddler精选插件扩展安装让你的Fiddler开挂到你怀疑人生

1.简介 Fiddler本身的功能其实也已经很强大了&#xff0c;但是Fiddler官方还有很多其他扩展插件功能&#xff0c;可以更好地辅助Fiddler去帮助用户去开发、测试和管理项目上的任务。Fiddler已有的功能已经够我们日常工作中使用了&#xff0c;为了更好的扩展Fiddler&#xff0c…

二阶段web基础与http协议

dns与域名 网络是基于tcp/ip协议进行通信和连接的 应用层-----传输层-----网络层-----数据链路层-----物理层 ip地址&#xff0c;每一台主机都有一个唯一的地址标识&#xff08;固定的ip地址&#xff09; 1.区分用户和计算机 2.通信 ip地址的问题在于32位二进制数组成的&…

Linux安装部署并使用Redis(包含Redis Desktop Manager界面化工具)

文章目录 前言一、Redis的简介二、redis的安装与配置&#xff08;Linux环境&#xff09;三、redis的使用&#xff08;Redis Desktop Manager界面化&#xff09;四、基本命令**String基本命令&#xff1a;****hash基本命令&#xff1a;****List基本命令&#xff1a;****set基本命…

探究SAM和眼球追踪技术在自动医学图像分割的应用(2023+GazeSAM: What You See is What You Segment)

摘要&#xff1a; 本研究探讨眼动追踪技术与SAM的潜力&#xff0c;以设计一个协同的人机交互系统&#xff0c;自动化医学图像分割。提出了GazeSAM系统&#xff0c;使放射科医生能够在图像诊断过程中通过简单地查看感兴趣的区域来收集分割掩模。该系统跟踪放射科医生的眼球运动…

Vue3 的ref和reactive的用法和区别

一、是什么&#xff1f; ref和reactive是Vue3中用来实现数据响应式的API&#xff0c;一般情况下&#xff0c;ref定义基本数据类型&#xff0c;reactive定义引用数据类型。 二、基础用法 1. ref ref的参数一般是基本数据类型&#xff0c;也可以是对象类型&#xff1b;如果参…

BugKu CTF(杂项篇MISC)—想要种子吗

BugKu CTF(杂项篇MISC)—想要种子吗 提 示: 描 述:flag{} 题目下载后是一张图片&#xff0c;打开如下。 一、工具 十六进制编辑器010 editor kali系统文件分离工具binwalk或者foremost 维吉尼亚密码 STEGHIDE图片隐写工具 文章所需的软件下载地址 ARCHPR压缩包密码破解…