前端代码也能「预制」了 - Swagger + Hey API 自动生成请求代码,告别手写 interface
Swagger + Hey API 自动生成请求代码,告别手写 interface
在前后端协作中,RESTful 接口缺乏强类型约束,常常带来一系列联调成本:前端遇到 read from undefined,排查后发现是后端返回的数据结构缺失;约定好的字段类型被悄然变更(例如 int32 改为 int64 纳秒);字段命名、大小写、enum 取值、是否可选等细节需要反复确认,既影响效率,也容易引入缺陷。
GraphQL、tRPC 能够从根本上解决这类问题,但对既有项目而言改造成本接近重写,新项目也存在不小的学习成本,在实际工程中往往难以落地。
本期介绍一种更具可行性的渐进式方案:由后端提供规范的 swagger.json,前端借助 Hey API 根据该契约自动生成请求代码。生成结果不仅覆盖请求发送,还可包含 response body 校验(可选启用 zod)、react-query 的查询代码与 key,并在编译期完成类型检查,从而尽早暴露问题、清晰划分前后端的责任边界。
该方案的另一项优势在于对 AI 与 CI 的友好度:数据结构固定后,AI 无需再推测接口的返回结构与路径细节,生成代码更准确;契约稳定也使 CI 中的类型检查、lint 与测试更加可靠。
它对后端实现与整体架构几乎没有侵入——开发方式仅从调用手写的 HTTP 接口,转为调用 Hey API 生成的接口。需要强调的前提是:后端提供的 swagger 必须准确,这仍依赖团队之间充分而严谨的沟通。
欢迎在评论区分享你的团队是如何管理前后端接口契约的。
#前端开发 #TypeScript #Swagger #HeyAPI #前后端联调 #AI编程 #asynctalk
asynctalk
（11/13）
1.1万播放
简介
订阅合集
Ghostty - 你的 Terminal 还没换新吗？
03:48
比 Node 快 3 倍的 Bun 能踢 Node 打工吗？
06:02
我把 on-call 甩给了 Claude Code
05:34
打日志的两个神级技巧｜5 分钟拿捏
05:45
Prompt 优化: 少点套路，多点效率
06:26
祖传 ESLint 该换了：oxlint 是真的快
04:53
用了 10 年 AntD 之后,聊聊 UI 库的下一个十年
13:51
Markdown 没凉,但 HTML 要上桌
08:12
用 TS 写命令行工具，比你想的简单多了
12:11
写完代码到上线,中间到底发生了啥
06:49
前端代码也能「预制」了 - Swagger + Hey API 自动生成请求代码,告别手写 interface
06:05
GraphQL:治好前后端联调内耗
16:28
react-call:弹框还能 await
04:50
顶部