1.类型的查找

image.png

第一个叫做内置类型声明，在我们安装typescript的时候就会带着一起给他安装下来的，就是内置的我们的声明文件。
还有一种的话叫做外部定义类型声明文件，这个的话一般是一些第三方库。第三方库它会自带一些帮助我们做了一些类型声明的文件，比如说像axios，他就是有带这个东西的，所以，他有我们对应的类型声明，我们是可以直接使用他的。
还有一种是自己来定义的一些类型声明文件，就是我需要自己来编写对应的这些类类型。

2.内置类型声明

内置的类型声明，内置的类型声明就是document.getElementById，哪里来的getElementById呀，点进去之后的话，就会发现它再lib.dom.d.ts中有被声明

image.png

放大

这些东西是我们安装typescript的时候就被安装的。

内置类型声明是typescript自带的、帮助我们内置了JavaScript运行时的一些标准化API的声明文件；
- 包括比如Math、Date等内置类型，也包括DOM API，比如Window、Document等；
内置类型声明通常在我们安装typescript的环境中会带有的；
phttps://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
    lodash内部这个库里面没有声明文件，有可能有人在types这个库里面写好了这个lodash的声明文件，自己去下载就好了。react也是，types这个库里面有它的声明。

4.自定义声明

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

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

在src下面lodash.d.ts

// 声明模块
declare module 'lodash' {
  export function join(arr: any[]): void
}

main.ts

import lodash from "lodash";
console.log(lodash.join(["abc", "cba"])); //abc,cba

前提是安装npm i lodash

5.声明变量-函数-类

.d.ts不用转成JS代码，然后让它运行，它只是做类型声明的，就是告诉ts的我有这个类型，所以不需要写实现.

我们在html中定义了变量的化，可不可以在main.ts中使用？

image.png

在html中，ts转js被打包好，放在html最底下引用，
在main.ts中打印变量

console.log(whyName)
console.log(whyAge)
console.log(whyHeight)

从js运行的角度来讲，它是可以被打印的，因为他是在定义之后被加载的。就是上面的代码在前，打印的在后。但是实际上，在main.ts中写的这三行代码通不过ts的编译，因为ts根本就不知道whyName，whyAge是个什么东西。如何解决问题，不让它报错呢？这个时候我们需要声明这三个变量，只声明就可以，不用赋值，目的是让他通过编译，变成js。
这个时候，在src底下的.d.ts文件中声明这几个变量，不用实现！！

declare let whyName: string
declare let whyAge: number
declare let whyHeight: number

image.png

main.ts


console.log(whyName)
console.log(whyAge)
console.log(whyHeight)

whyFoo()

const p = new Person("why", 18)
console.log(p)


$.ajax({
  
})

html

  <script>
    let whyName = "coderwhy"
    let whyAge = 18
    let whyHeight = 1.88

    function whyFoo() {
      console.log("whyFoo")
    }

    function Person(name, age) {
      this.name = name
      this.age = age
    }
  </script>

</body>

.d.ts

// 声明模块
declare module 'lodash' {
  export function join(arr: any[]): void
}

// 声明变量/函数/类
declare let whyName: string
declare let whyAge: number
declare let whyHeight: number

declare function whyFoo(): void

declare class Person {
  name: string
  age: number
  constructor(name: string, age: number)
}

// 声明文件
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.png'
declare module '*.svg'
declare module '*.gif'

// 声明命名空间
declare namespace $ {
  export function ajax(settings: any): any
}