什么是声明文件？

image.png
在 .ts 文件里面，引入第三方库的时候，如上面的axios、lodash等，发现有的第三方库没办法识别，同时编译也报错。
image.png

同时，发现直接调用 document 的方法，没有报错，但是这个我们从来没有声明过。
image.png
image.png

原因跟TS能否找到声明过的文件，和TS的查找规则是有关系的。

.d.ts 声明文件

image.png

声明文件在哪？

image.png

1、内置类型声明

image.pngimage.png

内置的声明文件，如 lib.dom.d.ts 等等
image.png（vs code 按住Alt，点击，就会跳转到声明文件）
image.png
image.png

查看：https://github.com/microsoft/TypeScript/tree/main/lib

2、外部定义类型声明

方式一：在自己库中进行类型声明
axios 第三方库没报错，也是因为写好了外部声明文件
image.png

方式二：通过社区维护的一个公有库DefinitelyTyped存放类型声明文件
https://github.com/DefinitelyTyped/DefinitelyTyped/
image.png
社区维护，就是可能会有某个第三方的库有人编写好了声明文件，然后放上去，供其他人下载使用

怎么知道有没有呢？
可以通过官网查找，看看有没有：https://www.typescriptlang.org/dt/search?search=

按上面例子，搜索lodash，已经有一个编写好的，然后你按右边介绍的安装方式安装
image.png
安装完后不报错了
image.png

3、自己编写类型声明

image.png

声明模块

（1）创建一个.d.ts 文件
image.png

（2）通过 declare 关键字，定义模块，就不会报错了。
image.png

（3）模块内部定义方法
虽然定义了模块，但是还是无法正常使用
image.png

在模块内填写函数的类型
image.png
就不会报错，同时会显示类型要求
image.png

声明变量、函数、类、接口

除此以外，还可以声明变量、函数、类、接口等
image.png
然后在其他文件中使用
image.png

给window添加类型

inderface 接口的特性，是多次声明，会把多个声明的内容都合并，因此下面的添加，不会影响原有的window的属性

  1. // 给全局的window加个类型
  2. declare global{
  3.   interface Window{
  4.     aaa?:any
  5.   }
  6. }

声明文件

image.png
image.png

image.png
image.png


=====================

shims-vue.d.ts

image.png
Vue Cli脚手架给我们创建了这个文件，目的是定义 defineComponent 这个类型。

本质上这个类型是没有意义的，只是帮我们在TS中有对应的提示，代码进行限制，更严谨。
image.png

env.d.ts

和上面的功能是一样的，这个是Vite自动生成的，而上面那个是Vue Cli的