.d.ts 是什么？

.d.ts 是什么？

用 TS 写的模块在发布的时候仍然是用 JS 发布，这就导致一个问题：TS 那么多类型数据都没了。所以需要一个 .d.ts 文件来标记某个 JS 库里面对象的类型。

typings 就是一个网络上的 d.ts 数据库。它的作用是描述 JavaScript 模块内导出的接口类型信息。

自动生成声明文件的配置

// tsconfig.json
{
  "compilerOptions": {
    "declaration": true
  }
}

Vue3 必备的模块类型声明

/* eslint-disable */
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

declare let $store: any
declare module '*.json'

.d.ts 中会使用 declare 声明模块类型

declare 关键字是干嘛用的？

在 .ts 中使用第三方库时，如果没有对应的 .d.ts 声明文件，我们可以通过 declare 来写声明文件。可以声明该模块，甚至可以直接声明一个值为 any 的同名变量，然后就可以在代码中直接使用该三方库了。

类型定义文件的作用

d.ts 用来定义类型信息以及接口规范。

• 想要在 TS 中使用 JS 里面的方法，不一定要有类型定义；但如果没有类型定义文件，编码过程中编辑器不会给出方法提示，找 API 时也没有对应的文档。
• DefinitelyTyped 让你把 "类型定义文件 (*.d.ts)" 发布到 npm 中，配合编辑器（或插件）就可以检测到 JS 库中的静态类型。
• 类型定义文件以 .d.ts 结尾，里面主要用来定义类型。

TypeScript 声明文件 (.d.ts) 的使用

使用场景

当我们在 TS 文件中需要引入外部库时，编译时是无法判断传入参数类型的，所以我们需要在引入前加入一个声明文件来帮助 TS 判断类型。现在大部分库都自带声明文件，一般在 @types 目录下。

声明外部模块示例

declare module 'fs' {
  function readFileSync(
    path: string | number,
    options?: { encoding?: string; flag?: string } | null
  ): string
}

import * as fs from 'fs'

const body = fs.readFileSync('../@types/fs.d.ts', { encoding: 'utf8' })
console.log(body)

引用声明文件的几种方法

• 在 tsconfig.json 的 types / typeRoots 中声明；
• 在 .d.ts 中用 /// <reference path="..." /> 三斜线指令；
• 包自带 .d.ts 时，TS 编译器会自动加载。

来源整理自：vue3js.cn 面试官系列