不可错过的前端效率提升工具--swapper-typescript-api

06-01 1280阅读

        如果你们的项目正在使用Typescript,如果你们的后端接口文档是用swapper管理的,你是不是不再想花无意义的时间去复制粘贴后端接口路径和定义入参出参类型。那么swapper-typescript-api就非常适合你。它将不需要你再花时间去定义接口和定义接口入参出参类型,让你可以更专注业务开发。

        话不多说,直接上图看效果:

不可错过的前端效率提升工具--swapper-typescript-api

变成↓↓↓↓↓↓

不可错过的前端效率提升工具--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”的接口,这个地址就是的。

    不可错过的前端效率提升工具--swapper-typescript-api

    3.2.3 根据自定义配置模版生成

    (待补充)

    四、可能碰到的问题

    1.npm install 失败

    仔细看报错信息,一般是没问题的,排查下是不是需要代理或者代理有问题。

    2.npx 命令执行失败报错 command not found: swagger-typescript-api

    多试几次,重启IDE,过一会儿就又可以了,还没排查具体原因。

    3.npx 命令执行失败,  api生成不成功

    换个接口文档试试,碰到过后端接口文档数据有问题,一直没有生成成功。换个接口少一点的地址就好了,大概率是上个接口文档地址里的数据有问题。因为涉及接口太多,还没来得及排查原因。

            

免责声明:我们致力于保护作者版权,注重分享,被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明:本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度,360,搜狗等多加搜索引擎自动关键词搜索配图,如有侵权的图片,请第一时间联系我们。

相关阅读

目录[+]

取消
微信二维码
微信二维码
支付宝二维码