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

相关推荐
沐土Arvin11 分钟前
港澳台行政区域json
前端
程序员鱼皮32 分钟前
我花 300 块,让 Claude Fable 5 开发桌面 APP,值么?
前端
William_Xu37 分钟前
JavaScript 并发控制
前端
拾年27537 分钟前
从零手写 Ajax:用原生 XHR 搭建前后端交互全流程
前端·javascript·ajax
光影少年39 分钟前
懒加载与分包:React.lazy + Suspense
前端·react.js·掘金·金石计划
小林ixn1 小时前
你以为你懂 + 号?看完这篇 Bun + TS 实战,才发现以前全写错了
前端·javascript·typescript
晓杰'1 小时前
从0到1实现Balatro游戏后端(8):Skip Blind与Tag奖励机制设计与实现
后端·websocket·typescript·项目实战·nestjs·状态管理·游戏服务器
namexingyun1 小时前
开源前端生态如何成为 AI UI 生成的“燃料“:shadcn/ui、Tailwind CSS、Storybook 技术价值全解剖
java·前端·人工智能·python·ui·开源·ai编程
Zyed1 小时前
[STM32]Day15读写FLASH+读取ID
前端·stm32·性能优化
jvxiao2 小时前
你真的懂作用域吗?从编译原理角度深度 JS 的作用域
前端·javascript