美文网首页
⚡any-type, 傻瓜化操作, json数据生成typesc

⚡any-type, 傻瓜化操作, json数据生成typesc

作者: 铁皮饭盒 | 来源:发表于2022-01-20 09:48 被阅读0次

    今天给大家介绍我新开发的工具"any-type", 一个vscode插件, 他可以根据 javascript 字面量生成 typescript 类型.

    GIF

    🔥使用场景

    在ts中, axios请求的数据, 为了后面的操作, 我们都是要手动标注类型的, 比如:

    const response = await http.get<ResponseData>("/summary");
    

    这里"ResponseData"类型就是对接口的描述. 下面模拟一个销量统计接口.

    {
        "code":200, 
        "data": [
            {"name": "拼多多", "salesCount":"9999"},
            {"name": "阿里巴巴", "salesCount":"8888"},
            {"name": "京东", "salesCount":"7777"},
        ]
    }
    

    其类型描述:

    type ResponseData = {
      code: number;
      data: { name: string; salesCount: string }[];
    };
    

    可以预想到: "接口越复杂, 类型就越复杂".

    ⚡any-type

    这种类型我们可以通过"any-type"生成. 操作也很简单:

    1. 按"F1"键, 在控制台输入"generate" 找到"⚡ generate typescript type (生成ts类型)",回车.

      image
    2. 在新弹出的输入框中输入JSON数据.

      1
    3. 回车, "类型"会自动插入类型到编辑器.

      2

    🌈安装

    在vscode商店中搜索"any-type".

    ⭐github

    如果你觉得any-type不错, 请给我个小小的star吧. 😁
    https://github.com/any86/any-type

    计划

    • 输入接口地址, 发起http请求, 解析返回值.

    相关文章

      网友评论

          本文标题:⚡any-type, 傻瓜化操作, json数据生成typesc

          本文链接:https://www.haomeiwen.com/subject/xocjhrtx.html