单人全栈API生成工具:后端集成 springdoc-openapi、前端集成 openapi-typescript(轻量,只生成类型),配置生成前端类型代码的脚本命令

张开发
2026/5/4 2:33:08 15 分钟阅读
单人全栈API生成工具:后端集成 springdoc-openapi、前端集成 openapi-typescript(轻量,只生成类型),配置生成前端类型代码的脚本命令
你遇到的前后端重复定义问题是全栈开发中的常见痛点。针对你目前的技术栈后端 Java Spring Boot前端 TypeScript Vue/React 等有几种成熟的解决方案可以彻底消除这种重复劳动。推荐方案使用 OpenAPISwagger自动生成前端类型这是业界最标准、维护成本最低的方案。你只需在后端写好 Java 类加上注解前端的所有接口类型就可以自动生成。具体实施步骤1. 后端集成 springdoc-openapi如果还没做在pom.xml中添加依赖xmldependency groupIdorg.springdoc/groupId artifactIdspringdoc-openapi-starter-webmvc-ui/artifactId version2.5.0/version /dependency启动项目后访问http://localhost:8080/v3/api-docs就能获得 OpenAPI JSON 描述文件。2. 前端使用工具生成 TypeScript 类型推荐使用openapi-typescript轻量只生成类型或openapi-generator功能更全。安装 openapi-typescriptbashnpm install -D openapi-typescript添加 npm 脚本jsonscripts: { gen:api: openapi-typescript http://localhost:8080/v3/api-docs -o src/api/generated.ts }运行后CapitalUseResponse会自动转换成 TypeScript 接口无需手写。3. 处理类型映射差异openapi-typescript默认的映射规则基本符合你的需求integer→numbernumber→number。对于BigDecimal后端会生成type: number前端直接使用number即可。如果有个性化需求比如想把date-time映射成Date对象可以通过配置实现。替代方案对比方案优点缺点适用场景OpenAPI 生成标准、生态成熟、支持请求/响应/校验需要后端增加注解绝大多数 RESTful 项目GraphQL 生成器前端可精确选择字段强类型学习曲线陡峭需改造接口对数据查询灵活性要求极高JSON Schema 自定义脚本完全可控无第三方依赖需要自己写生成脚本不想引入 Swagger 的轻量场景手动同步 ESLint 检查无额外工具100% 重复劳动易出错不推荐你的场景最适合 OpenAPI因为你是单人开发使用 OpenAPI 可以后端只需写一次类用Schema注解可以补充说明但不是必须。前端类型自动生成而且生成后的类型会直接与后端保持同步每次后端改完字段前端重新生成即可。同时生成 API 调用函数配合openapi-typescript-codegen或orval还可以生成 axios 请求代码。示例生成后的前端类型长什么样typescript// generated.ts 自动生成不用手写 export interface CapitalUseResponse { id: number; capitalNo: string; capitalName: string; // ... 所有字段自动出现 activityInstanceInfo: ActivityInstanceInfo; }额外技巧后端类也能减少重复如果你连后端 DTO 也不想一个个手写字段可以考虑使用MapStruct或Lombok 注解来自动映射但字段定义本身还是得写一次。不过相比前后端都写已经少了一半工作量。总结立即行动在后端加上springdoc-openapi前端用openapi-typescript。以后你只需要修改 Java 类运行一条命令就能得到最新的前端类型定义彻底告别重复劳动。

更多文章