好久沒發(fā)文章了，今天推薦一個近期自己寫的 vscode 插件：json2interface，我是基于 json2ts 插件，豐富了兩種能力：一個是可以支持復(fù)制 js 對象，不再只支持標(biāo)準(zhǔn)格式的 JSON 對象；另一個是可支持使用注釋。我去掉了復(fù)制一個 http 請求，直接粘貼返回結(jié)果的 interface 定義這個功能，個人使用體驗認為用處不大，后期再考慮加上。

WX20200906-150818.png

下面說一下這個插件的作用，將一個 JSON 或者 js 對象轉(zhuǎn)換為其對應(yīng)的 typescript interface 接口定義，節(jié)省了很多定義后端接口返回數(shù)據(jù)格式的時間。

舉個例子，比如我們從后端接口中的獲取到的數(shù)據(jù)如下：

{
    "errno": 0,
    "data": {
        "list": [
            {
                "wd_id": 155874794571111, // 提現(xiàn)工單號
                "account_id": 100000111, // 賬號
                "bank_province": "北京市", // 收款銀行省
                "bank_city": "北京", // 收款銀行城市
                "amount": 6000, // 提現(xiàn)金額 單位分
                "payee": "張三", // 收款人
                "bank": "北京招商銀行", // 收款銀行
                "status": 1, // 狀態(tài)值
                "create_time": 1558747945, // 創(chuàng)建時間
                "create_date": "2019-05-25 09:32:25", // 創(chuàng)建日期
                "status_desc": "審批中", // 狀態(tài)描述
                "permit": 1 // 1:顯示審批按鈕  0:不顯示審批按鈕
            }
        ]
    },
}

復(fù)制上面的 json 對象，在 vscode 中使用快捷鍵 control + opotion + v，即可得到對應(yīng)的 interface 定義，如下：

export interface List {
    /** 提現(xiàn)工單號 */
    wd_id: number;
    /** 賬號 */
    account_id: number;
    /** 收款銀行省 */
    bank_province: string;
    /** 收款銀行城市 */
    bank_city: string;
    /** 提現(xiàn)金額 單位分 */
    amount: number;
    /** 收款人 */
    payee: string;
    /** 收款銀行 */
    bank: string;
    /** 狀態(tài)值 */
    status: number;
    /** 創(chuàng)建時間 */
    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ù)類型的時間~
可能還有很多case沒有考慮到，比如 JSON 格式可能不規(guī)范之類的，希望大家多提 issue & PR~