手冲yapi转ts结构(chrome插件)

最近换了工作,好消息,接口文档用的yapi,坏消息,原来的yapi转ts的解决方案实现不了了。尝试了一次手工誊写,直呼受不了!!!

网上查了一堆,都没有能够命中我的心房的,不如跳舞手冲。

因为前一段面试,有面到一家使用chrome插件分析数据的公司。正好因为目前的公司的yapi部署方式的原因,我觉得写一个chrome插件,十分符合我原来的开发习惯!!

实现思路:

使用chrome插件,监听yapi的获取接口详情的接口(我选择监听当请求完成后),然后对这个接口通过chrome进行二次请求,将接口中的数据进行分析(helper.js),最后将分析结果在你点击按钮时,粘贴到你的剪切板。

整体思路比较简单,也就不画流程图了!

个人推荐直接用,如果有问题,直接联系我,我来维护

功能:

快速生成接口的ts结构,我习惯称它为一键interface

资源:

因为没有chrome开发者账号的缘故,所以目前需要打开开发者模式,然后将资源引进去

以下两者都可以

效果:

参考下图:

使用:

将资源引入到你的插件中,你需要将该插件,常驻,然后在你想要生成ts结构的接口,进行点击,然后获取对应参数就可以!!

效果

ts 复制代码
export interface IListByAreaParams {
/** 省份code */
provinceCode?:string;
/** 城市code */
cityCode?:string;
/** 区县code */
areaCode:string;
}

注意:

  1. 如果出现any效果,大概率是yapi文档,没有添加参数的类型,造成无法匹配。
  2. 当请求参数为query时,因为目前还没有好的办法和后端沟通如何加上类型,所以目前全是any(如果你有好的方案,请告诉我,感谢!)

关于BUG:

因为是第一个版本,目前还在团队中猛推!!并且仅仅自己进行了测试,所以肯定会有问题。

使用途中遇到问题或者遇到好的想法,可以评论给我,我来维护,或者修改!!!

最后一点

虽然是专业前端,但是个人UI审美,确实不咋滴(自己做的东西被各种人嫌弃,除了找对象🐶),如果有好的建议,俺可以维护!!

相关推荐
飞翔的佩奇4 分钟前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15881 小时前
点击Top切换数据
前端·javascript·vue.js
程序猿追1 小时前
Vue组件化开发
前端·html
艾德金的溪2 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长2 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH2 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
生莫甲鲁浪戴2 小时前
Android Studio新手开发第二十六天
android·前端·android studio
JH30733 小时前
B/S架构、HTTP协议与Web服务器详解
前端·http·架构
yi碗汤园3 小时前
【超详细】C#自定义工具类-StringHelper
开发语言·前端·unity·c#·游戏引擎
Kevin Wang7274 小时前
解除chrome中http无法录音问题,权限
前端·chrome