chrome外掛： yapi 介面TypeScript程式碼生成器
阿新 • • 發佈：2020-09-21
## 前言
2020-09-12 天氣晴，藍天白雲，微風，甚好。
前端Jser一枚，在公司的電腦前，瀏覽器開啟著yapi的介面文件，那密密麻麻的介面資料，要一個一個的去敲打成為TypeScript的interface或者type。 心煩。
雖然這樣的情況已經持續了大半年了，也沒什麼人去抱怨。 在程式中的any卻是出現了不少， 今any , 明天又any， 贏得了時間，輸了維護。 換個人來一看， what, 這個是what , 那個是what. 就算是過了一段時間，找來最初編寫程式碼的人來看，也是what what what。 這時候 TS 真香定律就出來了。
我是開始寫程式碼？ **還是開始寫生成程式碼的程式碼？**
扔個硬幣， 頭像朝上開始寫程式碼，反之，寫生成程式碼的程式碼。 第一次頭像朝上， 不行， 一次不算， 第二次， 還是頭像朝上，那5局3剩吧， 第三次，依舊是頭像朝上，呵呵，苦笑一下。 我就扔完五局，看看這上天幾個意思。 第四次，頭像朝向， 第五次頭像朝向。 呵呵噠。
好吧，既然這樣。 切，我命由我不由天，開始寫生成程式碼的程式碼。
於是才有了今天的這篇部落格。
## 分析
考慮到TypeScript程式碼生成這塊， 大體思路
* 方案一： 現有開源的專案.
* 方案二： yapi外掛
* 方案三： 後端專案開放許可權, 直接copy。 因為後端也是使用node + TS 來編寫的，這不太可能。
* 方案四： yapi上做手腳，讀取原始的介面元資料，生成TS。
* 直接操作資料庫
* 操作介面
* 頁面裡面扣
**方案一**
現在開源的專案能找到的是
* [yapi-to-typescript](https://github.com/fjc0k/yapi-to-typescript)
yapi-to-typescript非常強大和成熟， 推薦大家使用。
* [sm2tsservice](https://github.com/gogoyqj/sm2tsservice)
這個也很強大，不過需要進行一些配置。
**方案二**
[yapi-plugin-response-to-ts](https://github.com/kyuuseiryuu/yapi-plugin-response-to-ts) 看起來還不錯，19年5月更新的。
接下來說的是 方案四的一種
經過對 `/project/[project id]/interface/api/[api id]` 頁面的觀察。
發現頁面是在載入之後發出一個http請求，路徑為 `/api/interface/get?id=[api id]`, 這裡的`api id`和頁面路徑上的那個`api id`是一個值。
介面返回的資料格式如下：
```js
{
"errcode": 0,
"errmsg": "成功！",
"data": {
"query_path": {
"path": "/account/login",
"params": []
},
"req_body_is_json_schema": true,
"res_body_is_json_schema": true,
"title": "登入",
"path": "/account/login",
"req_params": [],
"res_body_type": "json",
"req_query": [],
// 請求的頭資訊
"req_headers": [
{
"required": "1",
"name": "Content-Type",
"value": "application/x-www-form-urlencoded"
}
],
// 請求的表單資訊
"req_body_form": [
{
"required": "1",
"name": "uid",
"type": "text",
"example": "1",
"desc": "number"
},
{
"required": "1",
"name": "pwd",
"type": "text",
"example": "123456",
"desc": "string"
}
],
"req_body_type": "form",
// 返回的結果
"res_body": "{\"$schema\":\"http://json-schema.org/draft-04/schema#\",\"type\":\"object\",\"properties\":{\"errCode\":{\"type\":\"number\",\"mock\":{\"mock\":\"0\"}},\"data\":{\"type\":\"object\",\"properties\":{\"token\":{\"type\":\"string\",\"mock\":{\"mock\":\"sdashdha\"},\"description\":\"請求header中設定Authorization為此值\"}},\"required\":[\"token\"]}},\"required\":[\"errCode\",\"data\"]}"
}
}
```
比較有用的資訊是
* req_query
* req_headers
* req_body_type 請求的資料型別 form|json等等
* req_body_form req_body_type 為form時有資料，資料長度大於0
* req_body_other req_body_type 為json時有資料
* res_body_type 返回的資料型別 form | json
* res_body res_body_type返回為json時有資料
我們專案上， req_body_type只用到了 form 或者 json。 res_body_type只使用了 json.
我們把res_body格式化一下
```json
{
"$schema": "http://json-schema.org/draft-04/schema#",
"type": "object",
"properties": {
"errCode": {
"type": "number",
"mock": {
"mock": "0"
}
},
"data": {
"type": "object",
"properties": {
"token": {
"type": "string",
"mock": {
"mock": "sdashdha"
},
"description": "請求header中設定Authorization為此值"
}
},
"required": [
"token"
]
}
},
"required": [
"errCode",
"data"
]
}
```
上面大致對應如下的資料
```json
{
"errCode": 0,
"data":{
"token": ""
}
}
```
到這裡可以開始寫生成程式碼的程式碼了。
這裡要處理兩個格式的資料，一種是form對應的陣列資料，一種是json對應的資料。
## 程式碼
先定義一下介面
```ts
export interface BodyTran