手冲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审美,确实不咋滴(自己做的东西被各种人嫌弃,除了找对象🐶),如果有好的建议,俺可以维护!!

相关推荐
Light603 小时前
CSS逻辑革命:原生if()函数如何重塑我们的样式编写思维
前端·css·响应式设计·组件化开发·css if函数·声明式ui·现代css
蜡笔小嘟3 小时前
宝塔安装dify,更新最新版本--代码版
前端·ai编程·dify
ModyQyW4 小时前
HBuilderX 4.87 无法正常读取 macOS 环境配置的解决方案
前端·uni-app
bitbitDown4 小时前
我的2025年终总结
前端
五颜六色的黑4 小时前
vue3+elementPlus实现循环列表内容超出时展开收起功能
前端·javascript·vue.js
wscats5 小时前
Markdown 编辑器技术调研
前端·人工智能·markdown
EnoYao5 小时前
Markdown 编辑器技术调研
前端·javascript·人工智能
JIngJaneIL6 小时前
基于java+ vue医院管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot
JIngJaneIL6 小时前
基于java + vue校园跑腿便利平台系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot
前端要努力6 小时前
月哥创业3年,还活着!
前端·面试·全栈