typescript 类型声明文件
typescript 类型声明文件概述
在今天几乎所有的JavaScript应用都会引入许多第三方库来完成任务需求。这些第三方库不管是否是用TS编写的,最终都要编译成JS代码,才能发布给开发者使用。6我们知道是TS提供了类型,才有了代码提示和类型保护等机制。但在项目开发中使用第三方库时,你会发现它们几乎都有相应的TS 类型,这些类型是怎么来的呢?类型声明文件类型声明文件:用来为已存在的JS 库提供类型信息。这样在TS 项目中使用这些库时,就像用TS一样,都会有代码提示、类型保护等机制了。
- TS的两种文件类型
- 类型声明文件的使用说明
示例如下,当我们使用axios包的时候,我们发现,axios函数的实参url,编译器提醒我们它是可选的,
但我们知道,js本身它是没有这种功能的,这是ts才有的,
tips:
我们打开axios的包可以看到,axios的包源码都是js,这简直不可思议,但这axios的代码提示却给我们一种这就是ts写的一样
,
其实这个效果就是类型声明文件来实现的,
index.d.ts就是axios的类型声明文件
当然除了直接来包里翻找axios的源码,我们也可以使用vscode的快捷查看来看
光标移动到axios上面按住ctrl键然后点击就能看到了
使用已有的类型声明文件
- 内置类型声明文件
- 第三方库的类型声明文件
内置类型声明文件
ts为js运行时可用的所有标准化内置API都提供了声明文件
比如,在使用数组时,数组所有方法都会有相应的代码提示以及类型信息
实际上这都是TS提供的内置类型声明文件
可以通过ctrl+点击来查看内置的内心声明文件内容
比如,查看forEach方法的类型声明,在vscode中会自动跳转到lib.es5.d.ts类型声明文件中
tips:像window.document等bom dom 等API也有相应的类型声明,这些类型声明文件都是ts帮我们内置好的
第三方库的类型声明文件
目前,几乎所有的常用库都有相应的类型声明文件
第三方库的类型声明文件有两种存在形式,
- 库自带类型声明文件
- 由DefinitelyTyped提供
库自带类型声明文件
比如axios,axios自带index.d.ts文件,正常导入该库,ts就会自动加载这个类型声明文件,提供该库的类型声明
现在各位应该就能真真切切的知道为什么在js的代码也有类型提示了,但是编译器是怎么知道要去加载这个文件呢?
这个我们就得回到npm包,npm包规定,默认加载是包下面的index.js这是包的入口文件,并且在package.json文件内声明了
类型声明文件也是这样的,在package.json文件声明了如下图
tips typings这个属性规定了从那加载
由DefinitelyTyped提供
DefinitelyTyped是一个github仓库,用来提供高质量Typescript类型声明
可以通过npm/yarn来下载该仓库提供的ts类型声明包,这些包的名称格式为:@tyoes/*
比如,@types/react 2types/lodash 等
说明,在实际项目开发时,如果你使用的第三方库没有自带的声明文件,vscode会给除明确的提示
tips:
- 当安装@types/*类型声明包后,TS也会自动加载该类型声明包,以提供该库的类型声明
- TS官方文档提供了一个页面,可以用来查询@types/*库
示例如下
下载lodash包
在引入lodash包的时候,编译器便会给出提示,lodash包没有类型声明文件,所有的方法都会隐式拥有any类型
这时候可以根据提示去使用npm i --save-dev @types/lodash
添加声明文件,当然,得有这个包的声明文件才能加
安装好了就不再爆错了
创建自己的类型声明文件
实际上在项目开发的过程中,有两种时候需要使用到类型声明文件
- 项目内共享类型
- 为已有的js文件提供类型声明
项目内共享类型声明文件
如果多个.ts文件中都用到同一个类型,此时可以创建.d.ts文件提供该类型,实现类型共享
操作步骤
- 创建index.d.ts类型声明文件
- 创建需要共享的类型,并使用export导出(TS中的类型也可以使用import/export实现模块化功能
- 在需要使用共享类型的.ts文件中,通过import导入即可
tips: .d.ts后缀导入时,可以直接省略
示例如下
有sample1和sample2两个ts文件,两个文件内都拥有一个Mankind类型,像下面这样两个页面内都分别定义一次Mankind类型,这样明显是冗余代码.且后期更改Mankind类型时,还需要分别去更改,也不利于维护
这时候更好的办法就是将类型声明定义在一个单独文件内
tips:一般而言,共享的类型声明都是定义文件都是叫index.d.ts的
但是我这个文件夹内有其它的文件,并不是独立的所以更好的命名方式应该是叫sample.d.ts
然后在sample.d.ts中写好Mankind类型的声明,并使用export导出
有了共享的类型声明文件就没必要再分开单独定义一次了,直接使用import导入定义好的类型声明文件就好
Mankind类型也正常的对对象约束
为已有的js文件提供类型声明文件
为已有的js文件提供类型声明文件主要有以下两种情况
- 将js项目迁移到Ts项目时,为了让已有的js文件有类型声明
- 成为库作者,创建库给其它人使用
tips:
类型声明文件的编写与模块化方式相关,不同的模块化方式有不同的写法,但是由于历史原因,js模块化的发展距离多种变化(amd,commonjs,umd,esmodule等),而TS支持各种模块化声明的类型声明,这就导致,类型声明文件相关内容又多又杂
限于篇幅原因,本文章就仅介绍esmodule的创建声明方式(写那么多也没人愿意看)
真想知道自己看官方文档,链接就放这了
typescript类型声明文件
好的,言归正传,示例开始
环境搭建,既然是模块化,那肯定绕不开打包,这里就以webpack作为打包工具,来示例了
晚点填坑,打几把游戏去
相关文章:

typescript 类型声明文件
typescript 类型声明文件概述 在今天几乎所有的JavaScript应用都会引入许多第三方库来完成任务需求。这些第三方库不管是否是用TS编写的,最终都要编译成JS代码,才能发布给开发者使用。6我们知道是TS提供了类型,才有了代码提示和类型保护等机…...

Hadoop伪分布式环境搭建
什么是Hadoop伪分布式集群? Hadoop 伪分布式集群是一种在单个节点上模拟分布式环境的配置,用于学习、开发和测试 Hadoop 的功能和特性。它提供了一个简化的方式来体验和熟悉 Hadoop 的各个组件,而无需配置和管理一个真正的多节点集群。 在 Ha…...

javaee ssm框架项目添加分页控件
搭建ssm框架项目 参考上一篇博文 添加分页控件 引入依赖 <?xml version"1.0" encoding"UTF-8"?><project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schema…...

2023年中国非晶纳米晶竞争格局、产业链及行业产量分析[图]
非晶合金又称“液态金属、金属玻璃”,是一种新型软磁合金材料,主要包含铁、硅、硼等元素。其主要制品非晶合金薄带的制造工艺是采用急速冷却技术将合金熔液以每秒106℃的速度急速冷却,形成厚度约0.03mm的非晶合金薄带,物理状态表现…...
在业务开发中遇到的树形结构(部门、区域、职位),递归处理。
文章目录 概要对象结构示例完整示例小结 概要 本文主要记录在树形结构中会遇到的问题, 使用部门结构讲解,main方法进行演示。 1、获取部门树结构 2、根据部门id获取所有下级 3、根据部门id获取上级部门 4、根据部门id获取类似面包屑(总公司…...

张量-算术操作函数
tf.add(x,y,name None)求和函数 示例代码如下: import tensorflow.compat.v1 as tf tf.disable_v2_behavior()x 1 y 2a tf.add(x,y)with tf.Session() as sess:print(sess.run(a)) tf.subtract(x,y,name None)减法函数 示例代码如下: import tensorflow.compat.v1 as …...

虚拟展厅有什么重要意义,了解虚拟展厅在宣传中的应用
引言: 随着科技的不断进步,虚拟展厅已经逐渐成为展览行业的重要一环。虚拟展厅是一种数字化平台,为观众提供了与传统展览完全不同的体验。 一.虚拟展厅的定义 虚拟展厅是一个通过互联网和虚拟现实技术创建的数字展示空间&#x…...
华为OD机试真题-补种未成活胡杨(Java/C++/Go/Python)
华为OD机试真题-补种未成活胡杨(Java/C++/Go/Python) 题目描述 近些年来,我国防沙治沙取得显著成果。某沙漠新种植N棵胡杨(编号1-N),排成一排。 一个月后,有M棵胡杨未能成活。现可补种胡杨K棵,请问如何补种(只能补种,不能新种),可以得到最多的连续胡杨树? 输入…...

Java卷上天,可以转行干什么?
小刚是某名企里的一位有5年经验的高级Java开发工程师,每天沉重的的工作让他疲惫不堪,让他萌生出想换工作的心理,但是转行其他工作他又不清楚该找什么样的工作 因为JAVA 这几年的更新实在是太太太……快了,JAVA 8 都还没用多久&am…...

Pyside6 安装和简单界面开发
Pyside6 安装和简单界面开发 Pyside6介绍Pysied6开发环境搭建Python安装Pysied6安装 Pyside6界面开发简单界面设计界面设计界面编译 编写界面初始化代码软件打包 Pyside6介绍 对于Python的GUI开发来说,Python自带的可视化编程模块的功能较弱,PySide是跨…...

python读取vivo手机截图,将满屏图片文件移动别的路径
问题之初 python读取vivo手机截图, 将满屏图片文件移动别的路径好多这样的图片,占用手机大量的内存,食之无味弃之可惜!那么会复制粘贴👀代码的我们我们今天就把这些图片筛选清理掉。 这段代码 原有逻辑的基础上&…...

【一周安全资讯1007】多项信息安全国家标准10月1日起实施;GitLab发布紧急安全补丁修复高危漏洞
要闻速览 1.以下信息安全国家标准10月1日起实施 2.GitLab发布紧急安全补丁修复高危漏洞 3.主流显卡全中招!GPU.zip侧信道攻击可泄漏敏感数据 4.MOVEit漏洞导致美国900所院校学生信息发生大规模泄露 5.法国太空和国防供应商Exail遭黑客攻击,泄露大量敏感…...
2023年09月个人工作生活总结
本文为 2023 年 9 月工作生活总结。 研发编码 Alpine 容器 某工程部署于alpine镜像,当初看上是因为其体积小,其它微服务,在250MB左右,但那个工程只用50MB。最近发现时间戳转换不正确。对于同一时间字符串转时间戳函数࿰…...

现货白银图表分析的依据
现货白银的行情图表分析其实与股票的差不多,投资者可以结合均线、k线的变化,来分析实时的行情走势。当走势图的均线呈多头排列,即短期、中期、长期均线依次从上到下排列并向右上方运行,且白银价格沿各均线向右上方拉升,…...
python多线程与多进程
多线程与多进程 一, 什么是进程, 什么是线程? 进程: 运行中的程序. 每次我们执行一个程序, 咱们的操作系统对自动的为这个程序准备一些必要的资源(例如, 分配内存, 创建一个能够执行的线程. ) 线程: 程序内, 可以直接被CPU调度的执行过程. 是操作系统能够进行运算调度…...

62从零开始学Java之时间相关的类都有哪些?
作者:孙玉昌,昵称【一一哥】,另外【壹壹哥】也是我哦 千锋教育高级教研员、CSDN博客专家、万粉博主、阿里云专家博主、掘金优质作者 前言 我们在开发时,除了数字、数学这样的常用API之外,还有日期时间类,更…...
【Leetcode】买卖股票系列
121. 买卖股票的最佳时机 给定一个数组 prices ,它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一天 买入这只股票,并选择在 未来的某一个不同的日子 卖出该股票。设计一个算法来计算你所能获取的最大利润。 返回你可以从这笔…...

SLAM面试笔记(8) — 计算机视觉面试题
目录 问题1:目标检测的算法分类 问题2:卷积神经网络的组成 问题3:输入层的作用 问题4:卷积层作用 问题5:卷积核类型 问题6:11卷积核作用 问题7:卷积核是否越大越好 问题8:棋…...

聊聊MySQL面试常问名词回表、索引覆盖,最左匹配
文章目录 1. 前言2. 回表操作 Index Lookup2.1 什么是回表2.2 回表的成本2.3 如何避免回表 3. 索引覆盖 Covering Index3.1 什么是索引覆盖3.2 索引覆盖的优点3.3 如何使用索引覆盖 4. 最左匹配原则(Leftmost Prefix Match)4.1 什么是最左匹配原则4.2 最…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...

HashMap中的put方法执行流程(流程图)
1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中,其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下: 初始判断与哈希计算: 首先,putVal 方法会检查当前的 table(也就…...

基于TurtleBot3在Gazebo地图实现机器人远程控制
1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

uniapp手机号一键登录保姆级教程(包含前端和后端)
目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号(第三种)后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...
NPOI操作EXCEL文件 ——CAD C# 二次开发
缺点:dll.版本容易加载错误。CAD加载插件时,没有加载所有类库。插件运行过程中用到某个类库,会从CAD的安装目录找,找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库,就用插件程序加载进…...

R 语言科研绘图第 55 期 --- 网络图-聚类
在发表科研论文的过程中,科研绘图是必不可少的,一张好看的图形会是文章很大的加分项。 为了便于使用,本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中,获取方式: R 语言科研绘图模板 --- sciRplothttps://mp.…...

Android写一个捕获全局异常的工具类
项目开发和实际运行过程中难免会遇到异常发生,系统提供了一个可以捕获全局异常的工具Uncaughtexceptionhandler,它是Thread的子类(就是package java.lang;里线程的Thread)。本文将利用它将设备信息、报错信息以及错误的发生时间都…...

基于单片机的宠物屋智能系统设计与实现(论文+源码)
本设计基于单片机的宠物屋智能系统核心是实现对宠物生活环境及状态的智能管理。系统以单片机为中枢,连接红外测温传感器,可实时精准捕捉宠物体温变化,以便及时发现健康异常;水位检测传感器时刻监测饮用水余量,防止宠物…...

云原生安全实战:API网关Envoy的鉴权与限流详解
🔥「炎码工坊」技术弹药已装填! 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关 作为微服务架构的统一入口,负责路由转发、安全控制、流量管理等核心功能。 2. Envoy 由Lyft开源的高性能云原生…...
拟合问题处理
在机器学习中,核心任务通常围绕模型训练和性能提升展开,但你提到的 “优化训练数据解决过拟合” 和 “提升泛化性能解决欠拟合” 需要结合更准确的概念进行梳理。以下是对机器学习核心任务的系统复习和修正: 一、机器学习的核心任务框架 机…...