vscode 插件 — json2interface，JSON 转

好久没发文章了，今天推荐一个近期自己写的 vscode 插件：json2interface，我是基于 json2ts 插件，丰富了两种能力：一个是可以支持复制 js 对象，不再只支持标准格式的 JSON 对象；另一个是可支持使用注释。我去掉了复制一个 http 请求，直接粘贴返回结果的 interface 定义这个功能，个人使用体验认为用处不大，后期再考虑加上。

WX20200906-150818.png

下面说一下这个插件的作用，将一个 JSON 或者 js 对象转换为其对应的 typescript interface 接口定义，节省了很多定义后端接口返回数据格式的时间。

举个例子，比如我们从后端接口中的获取到的数据如下：

{
    "errno": 0,
    "data": {
        "list": [
            {
                "wd_id": 155874794571111, // 提现工单号
                "account_id": 100000111, // 账号
                "bank_province": "北京市", // 收款银行省
                "bank_city": "北京", // 收款银行城市
                "amount": 6000, // 提现金额 单位分
                "payee": "张三", // 收款人
                "bank": "北京招商银行", // 收款银行
                "status": 1, // 状态值
                "create_time": 1558747945, // 创建时间
                "create_date": "2019-05-25 09:32:25", // 创建日期
                "status_desc": "审批中", // 状态描述
                "permit": 1 // 1:显示审批按钮  0:不显示审批按钮
            }
        ]
    },
}

复制上面的 json 对象，在 vscode 中使用快捷键 control + opotion + v，即可得到对应的 interface 定义，如下：

export interface List {
    /** 提现工单号 */
    wd_id: number;
    /** 账号 */
    account_id: number;
    /** 收款银行省 */
    bank_province: string;
    /** 收款银行城市 */
    bank_city: string;
    /** 提现金额 单位分 */
    amount: number;
    /** 收款人 */
    payee: string;
    /** 收款银行 */
    bank: string;
    /** 状态值 */
    status: number;
    /** 创建时间 */
    create_time: number;
    /** 创建日期 */
    create_date: string;
    /** 状态描述 */
    status_desc: string;
    /** 1:显示审批按钮  0:不显示审批按钮 */
    permit: number;
}

export interface Data {
    list: List[];
}

export interface RootObject {
    errno: number;
    data: Data;
}

是不是可以节省了很多定义接口数据类型的时间~
可能还有很多case没有考虑到，比如 JSON 格式可能不规范之类的，希望大家多提 issue & PR~

最后编辑于：2020.12.03 20:37:18