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作为打包工具,来示例了

晚点填坑,打几把游戏去

相关推荐
小镇程序员几秒前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
疯狂的沙粒11 分钟前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪20 分钟前
AJAX的基本使用
前端·javascript·ajax
力透键背23 分钟前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M34 分钟前
node.js第三方Express 框架
前端·javascript·node.js·express
weiabc34 分钟前
学习electron
javascript·学习·electron
想自律的露西西★1 小时前
用el-scrollbar实现滚动条,拖动滚动条可以滚动,但是通过鼠标滑轮却无效
前端·javascript·css·vue.js·elementui·前端框架·html5
白墨阳1 小时前
vue3:瀑布流
前端·javascript·vue.js
霍先生的虚拟宇宙网络2 小时前
webp 网页如何录屏?
开发语言·前端·javascript
温吞-ing2 小时前
第十章JavaScript的应用
开发语言·javascript·ecmascript