背景
入职新公司一个多月后，感觉项目代码就是一坨屎山。
很多接口类型为了省事，都是直接定义成 any，导致在使用的时候没有类型提示，甚至在迭代的时候还发现了不少因为传参导致的bug。
举个🌰：
Table分页的接口定义的是 pageSize 和 offset ，代码里传的是 size 和 offset ，导致每次都是全量拉数据，因为测试环境数据量少，完全没测出来。
目标
把代码中接口的 any 替换成 Yapi 上定义的类型，减少因为传参导致的bug数量。
设计
鉴于当前项目中接口数量庞大（其中any的接口有768个），尝试手动逐一审查并替换any类型的接口显得既不现实又效率低下，而且容易遗漏。
显然需要一种更加高效且可靠的方法来解决。
因为组内基本上都是使用 VSCode 开发，因此最终决定开发一个 VSCode 插件来实现接口替换。
考虑到直接扫描整个项目进行替换风险较大，因此最终是 按文件维度，针对当前打开的文件执行替换。
整个插件分为3个命令：
- 单个接口替换
- 整个文件所有接口替换
- 新增接口
image.png
接口可以分为存量和增量。
对于存量接口，分别实现了 整个文件批量替换、单个接口的替换 两个功能。
对于新增接口，可以通过 yapi 地址自动生成接口代码。
整体设计
插件按功能划分为6个模块：
image.png
详细设计
环境检测
Easy Yapi需要和Yapi服务器交互，需要用户提供Yapi Project相关的信息，因此需要填写配置文件，插件执行命令时会对配置文件内的信息进行检测。
缓存接口列表
从性能上考虑，一次批量替换后，会缓存当前Yapi项目所有接口的定义到cache文件中，下次替换不会重新请求。
接口捕获
不管是单个接口替换还是整个文件接口替换都需要先捕获接口，这里是通过将代码转成AST来实现。
image.png
image.png
类型生成
将接口定义转化成TS类型，通过循环+递归拼接字符串实现。
为什么不直接使用Yapi自带的ts类型？
- 命名问题，Yapi自带的ts类型命名规则过于简单，直接就是把接口的路径拼接起来
- 项目中有一层请求中间件，实际上最终的类型只有data那一层，而Yapi自定的类型是整个定义
代码插入
- 将生成的类型插入文件中
- 插入import语句，引入类型
- 替换原有的代码类型
交互流程
image.png
命令流程
image.png
