当前位置: 首页 > news >正文

typescript 类型声明文件

typescript 类型声明文件概述

在今天几乎所有的JavaScript应用都会引入许多第三方库来完成任务需求。这些第三方库不管是否是用TS编写的,最终都要编译成JS代码,才能发布给开发者使用。6我们知道是TS提供了类型,才有了代码提示和类型保护等机制。但在项目开发中使用第三方库时,你会发现它们几乎都有相应的TS 类型,这些类型是怎么来的呢?类型声明文件类型声明文件:用来为已存在的JS 库提供类型信息。这样在TS 项目中使用这些库时,就像用TS一样,都会有代码提示、类型保护等机制了。

  1. TS的两种文件类型
  2. 类型声明文件的使用说明

示例如下,当我们使用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帮我们内置好的

第三方库的类型声明文件

目前,几乎所有的常用库都有相应的类型声明文件
第三方库的类型声明文件有两种存在形式,

  1. 库自带类型声明文件
  2. 由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:

  1. 当安装@types/*类型声明包后,TS也会自动加载该类型声明包,以提供该库的类型声明
  2. TS官方文档提供了一个页面,可以用来查询@types/*库

示例如下

下载lodash包

在这里插入图片描述
在引入lodash包的时候,编译器便会给出提示,lodash包没有类型声明文件,所有的方法都会隐式拥有any类型
在这里插入图片描述
这时候可以根据提示去使用npm i --save-dev @types/lodash
添加声明文件,当然,得有这个包的声明文件才能加

安装好了就不再爆错了

在这里插入图片描述

创建自己的类型声明文件

实际上在项目开发的过程中,有两种时候需要使用到类型声明文件

  1. 项目内共享类型
  2. 为已有的js文件提供类型声明
项目内共享类型声明文件

如果多个.ts文件中都用到同一个类型,此时可以创建.d.ts文件提供该类型,实现类型共享

操作步骤

  1. 创建index.d.ts类型声明文件
  2. 创建需要共享的类型,并使用export导出(TS中的类型也可以使用import/export实现模块化功能
  3. 在需要使用共享类型的.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文件提供类型声明文件主要有以下两种情况

  1. 将js项目迁移到Ts项目时,为了让已有的js文件有类型声明
  2. 成为库作者,创建库给其它人使用

tips:
类型声明文件的编写与模块化方式相关,不同的模块化方式有不同的写法,但是由于历史原因,js模块化的发展距离多种变化(amd,commonjs,umd,esmodule等),而TS支持各种模块化声明的类型声明,这就导致,类型声明文件相关内容又多又杂
限于篇幅原因,本文章就仅介绍esmodule的创建声明方式(写那么多也没人愿意看)
真想知道自己看官方文档,链接就放这了
typescript类型声明文件
在这里插入图片描述

好的,言归正传,示例开始
环境搭建,既然是模块化,那肯定绕不开打包,这里就以webpack作为打包工具,来示例了
晚点填坑,打几把游戏去

http://www.lryc.cn/news/184251.html

相关文章:

  • Hadoop伪分布式环境搭建
  • javaee ssm框架项目添加分页控件
  • 2023年中国非晶纳米晶竞争格局、产业链及行业产量分析[图]
  • 在业务开发中遇到的树形结构(部门、区域、职位),递归处理。
  • 张量-算术操作函数
  • 虚拟展厅有什么重要意义,了解虚拟展厅在宣传中的应用
  • 华为OD机试真题-补种未成活胡杨(Java/C++/Go/Python)
  • Java卷上天,可以转行干什么?
  • Pyside6 安装和简单界面开发
  • python读取vivo手机截图,将满屏图片文件移动别的路径
  • 【一周安全资讯1007】多项信息安全国家标准10月1日起实施;GitLab发布紧急安全补丁修复高危漏洞
  • 2023年09月个人工作生活总结
  • 现货白银图表分析的依据
  • python多线程与多进程
  • 62从零开始学Java之时间相关的类都有哪些?
  • 2023年山东安全员c证考试题库及答案解析来了!
  • 【Leetcode】买卖股票系列
  • SLAM面试笔记(8) — 计算机视觉面试题
  • 聊聊MySQL面试常问名词回表、索引覆盖,最左匹配
  • 【面试】C/C++面试八股
  • 学习记忆——数学篇——算术——无理数
  • python协程和任务
  • visual studio code配置anaconda3的python虚拟环境
  • 【Unity3D编辑器开发】Unity3D编辑器开发基础性框架结构【全面总结】
  • 一座“城池”:泡泡玛特主题乐园背后,IP梦想照亮现实
  • 【什么是闭包? 闭包产生的原因? 闭包有哪些表现形式?】
  • JackJson和FastJson
  • SpringCloud学习一
  • SpringBoot, EventListener事件监听的使用
  • 课题学习(三)----倾角和方位角的动态测量方法(基于陀螺仪的测量系统)