CodeBuddy 提供三种自动生成并落盘 TypeScript 接口的方法:一是通过 Network Sniffer 捕获多组请求响应后合并生成带联合类型的接口并保存至指定路径;二是从 OpenAPI 文档上传或 CLI 命令一键导出到自定义路径;三是基于已有 TS 接口反向生成 OpenAPI Schema 再导出为新类型文件。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你在前后端联调过程中反复手动复制粘贴请求/响应类型定义,既容易出错又难以同步更新,急需一种能将调试中生成的 TypeScript 接口定义自动落盘到项目指定路径的方法。
用 CodeBuddy Network Sniffer 捕获流量并保存为 TS 接口
第一步:在 CodeBuddy 中启用 Network Sniffer 模式,并确保前端应用代理已配置为指向本地监听端口(如 http://localhost:8081)。
第二步:在浏览器中触发目标接口调用——至少完成 【3次不同参数组合的请求】,例如分别查询用户 ID 为 1、100、null 的响应,以覆盖字段空值与动态键名场景。
第三步:点击“分析流量并生成类型”,系统将合并所有响应体,自动标记 always-present 字段为非可选,sometimes-null 字段添加 | null 联合类型。
第四步:在预览界面确认类型结构无误后,选择“保存为 TS 接口”,弹出路径选择框 → 输入或浏览至项目内已有目录,例如 src/types/generated/api/user.ts → 点击确定。
注意:若指定路径不存在,CodeBuddy 不会自动创建父级目录,需提前手动建好 src/types/generated/api/ 文件夹,否则保存失败。
从 OpenAPI 文档一键导出到自定义路径
方法一:上传标准 API 描述文件
将项目中已有的 openapi.yaml 或 swagger.json 文件拖入 CodeBuddy 文档解析入口。
选择目标接口路径(如 GET /api/v1/users)并确认 HTTP 方法。
点击“导出 TypeScript 类型”按钮,系统生成 UsersGetRequest 与 UsersGetResponse 两个声明。
php获得文件的mime type类
php获得文件的mime type类
下载
复制全部内容 → 手动新建文件 src/types/openapi/user.ts → 粘贴保存。
方法二:使用 CLI 直接写入
在项目根目录执行命令:codebuddy doc --format typescript --output src/types/openapi/user.ts --source openapi.yaml --path "/api/v1/users"。
【该命令会直接覆盖同名文件,且不校验目标目录是否存在】,执行前请确认路径有效且无重要未提交修改。
基于已有 TS 接口反向生成并落地到指定位置
打开包含响应模型的 TS 文件(如 src/types/user.ts),定位到 UserDetailResponse interface。
右键点击 interface 关键字 → 选择“生成 OpenAPI Schema”。系统输出 YAML 片段。
接着右键该 YAML 片段 → 选择“导出为 TypeScript 类型” → 在弹窗中输入完整路径:src/types/generated/user-detail-response.ts → 确认。
这一步会将反向推导出的请求/响应类型对,严格按你指定的路径生成两个独立文件。