背景
入職新公司一個(gè)多月后卫枝，感覺(jué)項(xiàng)目代碼就是一坨屎山惩系。
很多接口類(lèi)型為了省事，都是直接定義成 any防楷，導(dǎo)致在使用的時(shí)候沒(méi)有類(lèi)型提示袒炉，甚至在迭代的時(shí)候還發(fā)現(xiàn)了不少因?yàn)閭鲄?dǎo)致的bug匪凡。
舉個(gè)??：
Table分頁(yè)的接口定義的是 pageSize 和 offset ，代碼里傳的是 size 和 offset ，導(dǎo)致每次都是全量拉數(shù)據(jù)吟孙，因?yàn)闇y(cè)試環(huán)境數(shù)據(jù)量少，完全沒(méi)測(cè)出來(lái)浑测。
目標(biāo)
把代碼中接口的 any 替換成 Yapi 上定義的類(lèi)型芥颈，減少因?yàn)閭鲄?dǎo)致的bug數(shù)量。
設(shè)計(jì)
鑒于當(dāng)前項(xiàng)目中接口數(shù)量龐大（其中any的接口有768個(gè)）角钩，嘗試手動(dòng)逐一審查并替換any類(lèi)型的接口顯得既不現(xiàn)實(shí)又效率低下吝沫，而且容易遺漏。
顯然需要一種更加高效且可靠的方法來(lái)解決递礼。
因?yàn)榻M內(nèi)基本上都是使用 VSCode 開(kāi)發(fā)惨险，因此最終決定開(kāi)發(fā)一個(gè) VSCode 插件來(lái)實(shí)現(xiàn)接口替換。
考慮到直接掃描整個(gè)項(xiàng)目進(jìn)行替換風(fēng)險(xiǎn)較大脊髓，因此最終是 按文件維度辫愉，針對(duì)當(dāng)前打開(kāi)的文件執(zhí)行替換。
整個(gè)插件分為3個(gè)命令：
- 單個(gè)接口替換
- 整個(gè)文件所有接口替換
- 新增接口
接口可以分為存量和增量将硝。
對(duì)于存量接口恭朗，分別實(shí)現(xiàn)了 整個(gè)文件批量替換、單個(gè)接口的替換 兩個(gè)功能袋哼。
對(duì)于新增接口冀墨，可以通過(guò) yapi 地址自動(dòng)生成接口代碼。
整體設(shè)計(jì)
插件按功能劃分為6個(gè)模塊：
詳細(xì)設(shè)計(jì)
環(huán)境檢測(cè)
Easy Yapi需要和Yapi服務(wù)器交互涛贯，需要用戶(hù)提供Yapi Project相關(guān)的信息诽嘉，因此需要填寫(xiě)配置文件，插件執(zhí)行命令時(shí)會(huì)對(duì)配置文件內(nèi)的信息進(jìn)行檢測(cè)。
緩存接口列表
從性能上考慮虫腋，一次批量替換后骄酗，會(huì)緩存當(dāng)前Yapi項(xiàng)目所有接口的定義到cache文件中，下次替換不會(huì)重新請(qǐng)求悦冀。
接口捕獲
不管是單個(gè)接口替換還是整個(gè)文件接口替換都需要先捕獲接口趋翻，這里是通過(guò)將代碼轉(zhuǎn)成AST來(lái)實(shí)現(xiàn)。
類(lèi)型生成
將接口定義轉(zhuǎn)化成TS類(lèi)型盒蟆，通過(guò)循環(huán)+遞歸拼接字符串實(shí)現(xiàn)踏烙。
為什么不直接使用Yapi自帶的ts類(lèi)型？
- 命名問(wèn)題历等，Yapi自帶的ts類(lèi)型命名規(guī)則過(guò)于簡(jiǎn)單讨惩，直接就是把接口的路徑拼接起來(lái)
- 項(xiàng)目中有一層請(qǐng)求中間件，實(shí)際上最終的類(lèi)型只有data那一層寒屯，而Yapi自定的類(lèi)型是整個(gè)定義
代碼插入
- 將生成的類(lèi)型插入文件中
- 插入import語(yǔ)句荐捻，引入類(lèi)型
- 替換原有的代碼類(lèi)型
交互流程
命令流程
