好久沒(méi)發(fā)文章了，今天推薦一個(gè)近期自己寫(xiě)的 vscode 插件：json2interface啄踊，我是基于 json2ts 插件忧设，豐富了兩種能力：一個(gè)是可以支持復(fù)制 js 對(duì)象，不再只支持標(biāo)準(zhǔn)格式的 JSON 對(duì)象颠通；另一個(gè)是可支持使用注釋址晕。我去掉了復(fù)制一個(gè) http 請(qǐng)求，直接粘貼返回結(jié)果的 interface 定義這個(gè)功能顿锰，個(gè)人使用體驗(yàn)認(rèn)為用處不大谨垃，后期再考慮加上。
WX20200906-150818.png
下面說(shuō)一下這個(gè)插件的作用硼控，將一個(gè) JSON 或者 js 對(duì)象轉(zhuǎn)換為其對(duì)應(yīng)的 typescript interface 接口定義刘陶，節(jié)省了很多定義后端接口返回?cái)?shù)據(jù)格式的時(shí)間。
舉個(gè)例子牢撼，比如我們從后端接口中的獲取到的數(shù)據(jù)如下：
{
"errno": 0,
"data": {
"list": [
{
"wd_id": 155874794571111, // 提現(xiàn)工單號(hào)
"account_id": 100000111, // 賬號(hào)
"bank_province": "北京市", // 收款銀行省
"bank_city": "北京", // 收款銀行城市
"amount": 6000, // 提現(xiàn)金額 單位分
"payee": "張三", // 收款人
"bank": "北京招商銀行", // 收款銀行
"status": 1, // 狀態(tài)值
"create_time": 1558747945, // 創(chuàng)建時(shí)間
"create_date": "2019-05-25 09:32:25", // 創(chuàng)建日期
"status_desc": "審批中", // 狀態(tài)描述
"permit": 1 // 1:顯示審批按鈕 0:不顯示審批按鈕
}
]
},
}
復(fù)制上面的 json 對(duì)象匙隔，在 vscode 中使用快捷鍵 control + opotion + v，即可得到對(duì)應(yīng)的 interface 定義熏版，如下：
export interface List {
/** 提現(xiàn)工單號(hào) */
wd_id: number;
/** 賬號(hào) */
account_id: number;
/** 收款銀行省 */
bank_province: string;
/** 收款銀行城市 */
bank_city: string;
/** 提現(xiàn)金額 單位分 */
amount: number;
/** 收款人 */
payee: string;
/** 收款銀行 */
bank: string;
/** 狀態(tài)值 */
status: number;
/** 創(chuàng)建時(shí)間 */
create_time: number;
/** 創(chuàng)建日期 */
create_date: string;
/** 狀態(tài)描述 */
status_desc: string;
/** 1:顯示審批按鈕 0:不顯示審批按鈕 */
permit: number;
}
export interface Data {
list: List[];
}
export interface RootObject {
errno: number;
data: Data;
}
是不是可以節(jié)省了很多定義接口數(shù)據(jù)類(lèi)型的時(shí)間~
可能還有很多case沒(méi)有考慮到纷责，比如 JSON 格式可能不規(guī)范之類(lèi)的，希望大家多提 issue & PR~
