为已有文件添加 d.ts 声明

2024-03-09 11:58:29

为已有文件添加 d.ts 声明

mockm 的配置项已添加到数十项，很多时候连我都记不起哪个选项是做什么的，有哪些使用方式，参数分别是什么……

解决办法就是去查文档。但是查文档知道也只是知道，写起来还不顺手，因为不会自动提示。

借助 ts 的声明文件，可以做到这一点。在为 mockm 的配置文件编写声明文件的时候，从0开始积累了一些经验，以下做一个简单的记录：

vscode 可利用 jsdoc 的 @type 参数来指定一个声明文件

/** @type {import('mockm/@types/config').Config} */
const config = {}

编写声明时, 多个类型应避免冲突, 冲突后就自动变成 any 了

函数最好用括号包裹

type Config = ConfigObj | ((util: ConfigFnArg) => ConfigObj)

可以通过 import 引用其他库的类型定义, 但要注意引用的是类型定义，而不是库的功能
```
import { AxiosStatic as axios } from 'axios' // 对
// import axios from 'axios' // 错
```
可以实现一些类似动态指定类型的效果
比如下面根据 api 的 key 前缀不同, 所能使用的函数不同.

import { Method } from 'axios'
type WsUrl = `ws${string}`
type HttpUrl = `${Method}${string}`
type Api = {
  [key: WsUrl]: ((ws: WebSocket, req: Request) => void),
  [key: HttpUrl]: ((req: Request, res: Response, next?: () => void) => void),
}
export {
  Api
}

/** @type {import('./api').Api} */
const api = {
  'ws /wsecho'(ws, req) {
    ws.send(`hello~`)
  },
  'get /user'(req, res) {
    res.json({msg: `ok`})
  },
}

码农公寓

为已有文件添加 d.ts 声明

为已有文件添加 d.ts 声明

参考

码农公寓

为已有文件添加 d.ts 声明

参考

相关文章