手冲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 小时前
油猴脚本创建webworker踩坑记录
前端·javascript·typescript
原则猫6 小时前
前端基础大厦
前端
陈随易7 小时前
编程语言级别的Skill市场,AI Agent 的未来形态
前端·后端·程序员
SoaringHeart8 小时前
Flutter进阶:基于 EasyRefresh 的下拉刷新封装 n_easy_refresh_mixin.dart
前端·flutter
IT_陈寒10 小时前
Vite的热更新突然不香了,排查三小时差点砸键盘
前端·人工智能·后端
子兮曰10 小时前
Agency-Agents 深度解析:400+ AI 专家的"梦之队"如何重塑开发工作流
前端·后端·vibecoding
竹林81811 小时前
用 The Graph 查询链上数据实战:从手搓 RPC 到 Subgraph,我的 NFT 项目数据加载快了 10 倍
前端·javascript
妙码生花11 小时前
从 PHP 到 AI + Golang,程序员自救转型手记(十九):点选验证码代码逐行目检
前端·后端·go
Awu122712 小时前
⚡从零开发 Agent CLI(五)实现一个可治理、可扩展的工具系统
前端·人工智能·claude
咪库咪库咪12 小时前
Vue3-生命周期
前端