类型的查找

类型的查找

之前我们所有的typescript中的类型，几乎都是我们自己编写的，但是我们也有用到一些其他的类型

const imageEl = document.getElementById("image") as HTMLImageElement;

大家是否会奇怪，我们的HTMLImaqeElement类型来自哪里呢?甚至是document为什么可以有getElementByid的法呢?

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

我们这里先给大家介绍另外的一种typescript文件:.d.ts文件

我们之前编写的typescript文件都是ts 文件，这些文件最终会输出s 文件，也是我们通常编写代码的地方口还有另外一种文件dks 文件，它是用来做类型的

声明(declare)。 它仅仅用来做类型检测，告知typescript我们有些类型

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

内置类型声明;

外部定义类型声明;

自己定义类型声明;

内置类型声明

内置类型声明是typescript自带的、帮助我们内置了JavaScript运行时的一些标准化API的声明文件口包括比如Math、Date等内置类型，也包括DOM API，比

如Window、Document等，

内置类型声明通常在我们安装typescript的环境中会带有的

链接: https://qithub.com/microsoft/TypeScript/tree/main/lib

《点击跳转》 (opens new window)

外部定义类型声明

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

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

方式一:在自己库中进行类型声明(编写dts文件)，比如axios

方式二:通过社区的一个公有库DefinitelyTyped存放类型声明文件

该库的GitHub地址: https://github.com/DefinitelyTyped/DefinitelyTyped/ 《点击跳转》 (opens new window)

该库查找声明安装方式的地址: https://www.typescriptlang.org/dt/search?search= 《点击跳转》 (opens new window)

比如我们安装react的类型声明: npmi@types/react --save-dev

自己定义类型声明

// src/utils/coderlzp.d.ts 中
// declare 声明 module 模块 
// declare module '变量名/模块名/包名'

// 声明模块
declare module 'loadsh'{
  // export 导出 方法/变量/类
  export function add(a:number,b:number){
    return a + b;
  }
  function sub(a:number,b:number){
    return a - b;
  }
}

// 声明变量/函数/类
declare let name:string;
declare function getName();

// 声明文件
declare module '*.png';

// src/index.ts 中

import loadsh from 'loadsh';

name = 'coderlzp';
getName();
// 引入图片
// import img from './assets/img.png';
loadsh.add(1,2);
loadsh.sub(1,2);