项目实际情况:已经开发一段时间,现在后端引入SpringDoc/OpenAPI,前端采用哪个方案更合适?用vite-plugin-openapi-ts?还是用openapi-typescript

张开发
2026/4/4 21:24:24 15 分钟阅读
项目实际情况:已经开发一段时间,现在后端引入SpringDoc/OpenAPI,前端采用哪个方案更合适?用vite-plugin-openapi-ts?还是用openapi-typescript
基于你项目的实际情况后端刚引入 SpringDoc、OpenAPI 文档尚不完整前端已有大量手工编写的 axios API 封装最合适的方案是openapi-typescript而不是vite-plugin-openapi-ts或其他全客户端生成工具。✅ 推荐方案openapi-typescript只生成类型不生成客户端为什么对比项openapi-typescriptvite-plugin-openapi-ts你的现状对文档完整性要求低缺失的 schema 变成unknown不报错高缺失会导致Schemes找不到编译失败后端文档不完整容易报错与现有手工 API 集成无缝只需替换类型定义侵入式需要改用生成的客户端已有大量手工 API不宜推翻学习成本低一条命令生成类型手动写请求中需配置自定义 axios 适配器解决缺失问题希望快速见效长期维护类型自动同步请求逻辑保持手工控制全自动但依赖文档完整性可以逐步完善文档后再考虑是否迁移兼容现有代码高只需将手写类型替换为从paths推导的类型低需要改写所有 API 调用改造成本最低️ 实施步骤5 分钟完成1. 安装并生成类型bashnpm install -D openapi-typescript在package.json中添加脚本jsonscripts: { gen:api: openapi-typescript http://localhost:8080/v3/api-docs --output src/api/generated.ts }运行生成命令bashnpm run gen:api2. 修改现有 API 文件使用生成的类型原来手工定义的类型src/types/index.tstsexport interface CapitalUseResponse { ... } export interface CapitalUseQueryRequest { ... }现在从generated.ts中提取类型src/api/capital.tstsimport type { paths } from ./generated; import { request } from /utils; // 从 paths 中提取请求体和响应类型 type CapitalUseQueryPath paths[/capital/usages/query][post]; type CapitalUseQueryRequest CapitalUseQueryPath[requestBody][content][application/json][schema]; type CapitalUseResponse CapitalUseQueryPath[responses][200][content][application/json][schema]; // 其他接口类似... type CapitalUseCreatePath paths[/capital/usages/workflow][post]; type CapitalUseCreateRequest CapitalUseCreatePath[requestBody][content][application/json][schema]; type CapitalUseCreateResponse CapitalUseCreatePath[responses][200][content][application/json][schema]; // 原有的 API 函数保持不变只是类型替换 export const queryCapitalUsePage (queryRequest: CapitalUseQueryRequest, signal?: AbortSignal) { return request.postPageResultCapitalUseResponse(/capital/usages/query, queryRequest, { signal }); }; export const addCapitalUseWithGenerateWorkflow (createRequest: CapitalUseCreateRequest, signal?: AbortSignal) { return request.postCapitalUseCreateResponse(/capital/usages/workflow, createRequest, { signal }); };3. 逐步删除手写的重复类型当你确认某个 DTO 已从generated.ts中正确推导后就可以删除src/types中对应的手写接口避免维护两套。4. 当后端文档完善后可选再考虑是否升级到全客户端生成如果未来所有 DTO 都完整出现在 OpenAPI 文档中且你希望进一步减少手工 API 代码可以再评估vite-plugin-openapi-ts或hey-api/openapi-ts。但当前阶段完全没必要。 总结推荐工具openapi-typescript核心优势容忍文档不完整与现有代码和谐共存改造成本最低立即解决类型同步问题。长期价值你仍然保留对请求逻辑的完全控制axios 拦截器、错误处理、取消请求等同时享受类型安全。这个方案能让你在今天之内解决所有类型报错并让后续开发中前后端类型自动同步。如果生成过程中遇到具体的类型推导问题比如嵌套路径太深我可以帮你写几个辅助类型来简化提取过程。

更多文章