【ts】TypeScript声明文件(.d.ts)

ts.jpg

看到别人写ts文件的时候，通常会有以.d.ts结尾的文件跟着，它的作用是，描述Javascript模板内导出的接口类型信息。

日常开发中，我们可以通过添加配置文件的配置项，自动生成该声明文件，在编译过程中会自动生成.d.ts的声明文件 ，主要以下几种情况需要

1.引入的第三方包，没有类型声明文件

这种一般会提示你缺少@type/xxxx的错误，也就是需要安装一下对应的插件包就可以了。或者，在源代码中添加类型声明文件；

2.通过该CDN引入的工具库

挂载一些全局的方法，如果在ts中，直接使用方法的话，会提示错误，此时需要引入全局的类型声明

---

那么声明文件改怎么写？🧐

需要明确的一点是，声明文件只是对类型的定义，不能进行赋值等操作

全局变量🎏

declare let / const
declare function
declare class
declare enum
declare namespace // 声明含有属性的全局对象
interface / type

除了比较常见的一些，namespace的定义可用于一个模块归集

declare namespace User {
  interface User {
    name: string
  }
  function getUser(name:string): User{
      return `` 
  }
}

或者，使用三斜线引入

///<reference types=“UMDModuleName/globalName” />

ts 早期模块化的标签, 用来导入依赖, ES6广泛使用后, 在编写TS文件中不推荐使用, 除了以下的场景使用///, 其他场景使用 import 代替；在声明文件中, 依赖全局库或被全局库依赖, 具体:

• 库依赖全局库, 因为全局库不能使用import导入
• 全局库依赖于某个 UMD 模块，因为全局库中不能出现import/export, 出现则为npm/UMD

注意: 三斜线指令必须放在文件的最顶端，三斜线指令的前面只允许出现单行或多行注释。

npm包📦

对于没有声明类型的npm包，咱可以创建一个types目录，来管理自己的声明文件，同时需要在配置文件中，加上

// tsconfig.json
  "baseUrl": ".",
  "paths": {
      "*": [ "*", "types/*"]
   }

自动生成声明文件的配置⚙

// tsconfig.json
complierOptions:{
  "declaration": true,
}