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

相关推荐
艺杯羹5 小时前
本地优先架构避坑:从重度云端依赖到客户端算力下沉与边缘自治实战
前端·系统架构·本地优先
transformer5 小时前
用 TRAE 给 Git 教程站补上第七个模块:一次真实的增量开发记录
前端
fengci.5 小时前
CTF2刷题记录(困难部分)
android·开发语言·前端·学习·php
计算机魔术师5 小时前
AI证伪了数学家信了几十年的假设,但物理那道题只答了一半
前端
vipxieliang5 小时前
JavaScript 深浅拷贝全解析:从 JSON 到 structuredClone
前端·javascript
jerrywus5 小时前
DeepSeek Harness 和 Pi Agent 怎么选?先想想你愿意折腾什么
前端·agent·deepseek
货拉拉技术5 小时前
一句话叫车:货拉拉小程序 AI 叫车实战
前端·agent·ai编程
yunyi5 小时前
给桌面客户端做下载加速:从「桶直接公开」到「边缘优先、源站兜底」的三代演进
前端·后端
world78112265 小时前
【C++】set 和 map
java·前端·c++·set·map
程序猿乐锅5 小时前
Streamlit 实现 AI 聊天 Agent:角色提示词、流式输出与会话管理
开发语言·前端·笔记·后端·python·学习