前言
在日常开发中，积累了一些常用的和后端对接口的小技巧。之前，这部分内容是写在我分享的这篇文章中 《分享我日常使用 Cursor 的一些小技巧》，但我觉得将它单独拆出来作为一篇文章会更合适一些。
本文分享的小技巧帮助快速生成与后端接口对接的模板代码和参数响应类型 typeScript。
一阶段: CV 搬运工
开发过程中，后端出好接口后，前端项目需要完成接口函数的定义以及一些参数、响应值的 typeScript 类型定义，传统方式就是手写，比较负责的同学会写好完善的 ts 类型，不太负责嫌麻烦的同学可能就都 anyscript 了（狗头）。
但开发任务不紧急的情况下还是写好类型吧，不然自己写代码也难受，不然什么都.不出来。
后面了解到有 Apifox 这类的软件可以快速复制 ts 类型，提高了一点点效率。
二阶段: 使用代码生成代码
再进一步提升效率，使用代码生成工具来生成模版代码，社区中有许多大佬们做好了工具，作用是可以通过根据 OpenApi3 规范的文档快速生成请求代码。例如:
我日常维护的项目使用的是 umi 我就使用 @umijs/openapi了。
具体使用方式这里不再赘述可以参考下这篇文章: juejin.cn/post/732089…
我日常的使用方式就是后端出新接口了，使用 Apifox 导出部分接口，选择导出 url 后会给一个本地地址。
复制本地url，添加到项目内配置的 openapi.config.ts文件 schemePatch，再执行pnpm openapi开始生成相关请求代码与 ts。
可以看到生成了一个文件夹，内容大差不差，但还需要自行手动斧正一下，虽然这些开源工具提供了丰富的自定义 hook 功能，但是我尝试写了一下，生成的代码不符合我的预期，也需要自行去了解自定义的规则，我们后面使用 Cursor 来省掉这一步骤。
（ps:之前尝试了让 ai 来完成 openapi.config.ts自定义 hook 的代码逻辑，但是写的并不好，最后没有使用）
我习惯把一个模块相关的请求代码放在一个 ts 文件内，手动搬运一下代码到一个文件中。
三阶段: AI修正生成后的代码格式
但代码和之前业务定义的代码肯定有差异，比如你的仓库中已经定义好了一些系统自定义的接口响应值枚举，分页接口响应的数据结构之类 的 TS。
export interface ApiResult<TData = unknown> {
code: number;
data?: TData;
msg?: string;
}
export interface PagintaionData<T> {
total: number;
items?: T[];
records?: T[];
}
export interface PageBasicParams {
isAsc?: boolean;
orderBy?: string;
orderType?: string;
page?: number;
size?: number;
pos?: number;
}
我希望把生成的接口代码修改为系统内定义好的规范，避免变的龙飞凤舞。这时候就需要 Cursor 出马来干 dirty code 的活了。
export function TestA(params: TestAparams) {
return request<ApiResult<TestAResponse>>('/test/a', {
method: 'GET',
params,
});
}
export function TestB(body: TestBbody) {
return request<ApiResult<TestBResponse>>('/test/a', {
method: 'POST',
body,
});
}
引用让Cursor参照的系统内规范的文件，再添加上刚刚CV搞到一起的 test 文件。
左侧的是修改后的，中级悬浮的截图是修改前，最右侧是Cursor 讲述的操作过程。我们还可以让他去掉不想看到的headers、options，以及使用 js 对象简写的写法让代码变的更清晰。
总结就是使用代码生成工具+Cursor 进一步优化流程，省去了自己自定义 hook 的过程，把脏活累活交给 ai 来完成就好。
总结
以上就是日常开发中的对接口提效偷懒方法了，希望对大家有帮助
