不可错过的前端效率提升工具--swapper-typescript-api
如果你们的项目正在使用Typescript,如果你们的后端接口文档是用swapper管理的,你是不是不再想花无意义的时间去复制粘贴后端接口路径和定义入参出参类型。那么swapper-typescript-api就非常适合你。它将不需要你再花时间去定义接口和定义接口入参出参类型,让你可以更专注业务开发。
话不多说,直接上图看效果:
变成↓↓↓↓↓↓
一、Github地址
swapper-typescript-api:GitHub - acacode/swagger-typescript-api: Generate the API Client for Fetch or Axios from an OpenAPI Specification
二、核心功能介绍
- 支持 Swagger 3.0、2.0、JSON 和 YAML
- 根据 OpenAPI 规范生成 Fetch 或 Axios 的 API 客户端
三、快速上手
3.1 安装
## npm npm install -g swapper-typescript-api ## yarn yarn add global swapper-typescript-api
3.2 生成API接口定义
3.2.1 快速生成(默认配置)
命令格式:npx swagger-typescript-api -p [你的项目swagger文档地址] -o [存储路径] --modular
npx swagger-typescript-api -p https://xxxx/api-docs -o ./src/swaggerAPI --modular
参数解释:
-p, --path SwaggerAPI文档的项目相对路径或远程URL地址
-o, --output TypeScript API 文件的输出路径(默认值:"./")
--modular 为 HTTP 请求封装函数、数据类型定义和接口路由生成独立的文件(默认值:false)
3.2.2 swagger远程文档地址获取
打开项目swagger平台,再调试工作台里找到“/api-docs”的接口,这个地址就是的。
3.2.3 根据自定义配置模版生成
(待补充)
四、可能碰到的问题
1.npm install 失败
仔细看报错信息,一般是没问题的,排查下是不是需要代理或者代理有问题。
2.npx 命令执行失败报错 command not found: swagger-typescript-api
多试几次,重启IDE,过一会儿就又可以了,还没排查具体原因。
3.npx 命令执行失败, api生成不成功
换个接口文档试试,碰到过后端接口文档数据有问题,一直没有生成成功。换个接口少一点的地址就好了,大概率是上个接口文档地址里的数据有问题。因为涉及接口太多,还没来得及排查原因。