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

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

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

实现思路：

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

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

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

功能：

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

资源：

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

以下两者都可以

• chrome-yapi2Ts【飞书云文档】
• chrome-yapi2ts【githup】

效果：

参考下图：

使用：

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

效果

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

注意：

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

关于BUG：

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

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

最后一点

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