TS类型的查找和声明

1、类型的查找

const imageEL = document.getElementById("image") as HTMLImageElement

ts文件中，HTMLImageElement类型来自哪里呢？甚至是document为什么可以有getElementById的方法呢？

• 其实这里就涉及到typescript对类型的管理和查找规则了。

typescript文件：.d.ts文件

• 我们编写的typescript文件都是 .ts 文件，这些文件最终会输出 .js 文件；
• 还有另外一种文件 .d.ts 文件，它是用来做类型的声明(declare)。 它仅仅用来做类型检测，告知typescript我们有哪些类型；

那么typescript会在哪里查找我们的类型声明呢？

• 内置类型声明；
• 外部定义类型声明；
• 自己定义类型声明；

2、内置类型声明

内置类型声明是typescript自带的、内置了JavaScript运行时的一些标准化API的声明文件；

• 包括比如Math、Date等内置类型，也包括DOM API，比如Window、Document等；

内置类型声明在安装typescript的环境中带有；

• https://github.com/microsoft/TypeScript/tree/main/lib

3、外部定义类型声明和自定义声明

外部类型声明通常是我们使用一些库（比如第三方库）时，需要的一些类型声明。

这些库通常有两种类型声明方式：

• 方式一：在自己库中进行类型声明（编写.d.ts文件），比如axios
• 方式二：通过社区的一个公有库DefinitelyTyped存放类型声明文件

该库的GitHub地址：https://github.com/DefinitelyTyped/DefinitelyTyped/

该库查找声明安装方式的地址：https://www.typescriptlang.org/dt/search?search=

比如我们安装react的类型声明：

npm i @types/react --save-dev

什么情况下需要自己来定义声明文件呢？

• 情况一：我们使用的第三方库是一个纯的JavaScript库，没有对应的声明文件；比如lodash
• 情况二：我们给自己的代码中声明一些类型，方便在其他地方直接进行使用；

3.1 声明变量-函数-类

3.2 声明模块

我们也可以声明模块，比如lodash模块默认不能使用的情况，可以自己来声明这个模块：

declare module "lodash" {
    export function join(args: any[]): any
}

3.3 declare文件

在某些情况下，我们也可以声明文件：

• 比如在开发vue的过程中，默认是不识别我们的.vue文件的，那么我们就需要对其进行文件的声明；
• 比如在开发中我们使用了 jpg 这类图片文件，默认typescript也是不支持的，也需要对其进行声明；

declare module '*.vue' {
    import { DefineComponent } from 'vue'
    const component: DefineComponent
    
    export default component
}

declare module '*jpg' {
    const src: string
    export default src
}

3.4 declare命名空间

比如我们在index.html中直接引入了jQuery：

• CDN地址： https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js

我们可以进行命名空间的声明：

declare namespace $ {
    function ajax(settings: any): void
}

在main.ts中就可以使用了：