类型声明文件 `.d.ts` 的使用

前言

在运行 TS 项目或者使用 TS 编写的第三方库的时候，我们通常利用 vscode 等 IDE 查看相应变量或函数声明的类型。我们可以点击这些变量或函数，跳转到其对应的类型声明文件 .d.ts。我们发现，第三方库中的文件包含两份同名文件 xxx.js 和 xxx.d.ts，下面将简要介绍不同文件类型的作用及手动编写的方法。

TS 中的两种文件类型：

👉 .ts 文件既包含类型信息又可执行代码，可以被编译为 .js 文件，然后执行代码。用途：编写程序代码的地方

👉 .d.ts 文件只包含类型信息的类型声明文件，不会生成 .js 文件，仅用于提供类型信息，在 .d.ts 文件中不允许出现可执行的代码，只用于提供类型。用途：为 JS 提供类型信息

❇️ 总结：.ts 是 implementation(代码实现文件)；.d.ts 是 declaration(类型声明文件)

如果要为 JS 库提供类型信息，要使用 .d.ts 文件

编写 `.d.ts` 类型声明文件

TS 声明语句只能写在两种文件类型里：.ts 和 .d.ts 二者的区别已经在上述介绍，总结来说 .ts 可以包含 .js 逻辑和 .d.ts 的类型声明，因此我们在编写 TS 时也对应了两种创建方式。

1️⃣ 编写 .ts 文件： 逻辑与类型声明写在一个文件中，也可以从外部导入额外的 .ts 或 .d.ts 进行类型补充。

值得注意的是，外部导入的 .d.ts 文件不能与当前 .ts 文件重名

2️⃣ 编写 .js 与 .d.ts 文件： 逻辑和类型声明分别写在同名但不同类型的文件中。 TS 项目中也可以使用 .js 文件。在导入 .js 文件时，TS 会自动加载与 .js 同名的 .d.ts 文件，以提供类型声明。我们使用 declare 关键字来自动映射变量类型： declare 关键字：用于类型声明，为其他地方(比如，.js 文件)已存在的变量声明类型，而不是创建一个新的变量。

对于 type、interface 等这些明确就是 TS 类型的(只能在 TS 中使用的)，可以省略 declare 关键字。
对于 let、function 等具有双重含义(在 JS、TS 中都能用)，应该使用 declare 关键字，明确指定此处用于类型声明。

举例: a.js

let count = 10
let songName = '痴心绝对'
let position = {
  x: 0,
  y: 0
}

function add(x, y) {
  return x + y
}

function changeDirection(direction) {
  console.log(direction)
}

const fomartPoint = point => {
  console.log('当前坐标：', point)
}

export { count, songName, position, add, changeDirection, fomartPoint }

a.d.ts

declare let count:number

declare let songName: string

interface Position {
  x: number,
  y: number
}

declare let position: Position

declare function add (x :number, y: number) : number

type Direction = 'left' | 'right' | 'top' | 'bottom'

declare function changeDirection (direction: Direction): void

type FomartPoint = (point: Position) => void

declare const fomartPoint: FomartPoint

export {
  count, songName, position, add, changeDirection, FomartPoint, fomartPoint
}

jtwang7 / JavaScript-Note