any-type, 傻瓜化操作, json資料生成typescript型別

今天給大家介紹"any-type", 一個vscode外掛, 他可以根據 javascript 字面量生成 typescript 型別.

?使用場景

在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型別)",回車.
   
2. 在新彈出的輸入框中輸入JSON資料.
   
3. 回車, "型別"會自動插入型別到編輯器.
   

?安裝

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

⭐github

如果你覺得any-type不錯, 請給我個小小的star吧. ?
https://github.com/any86/any-...

計劃

• [x] 輸入介面地址, 發起http請求, 解析返回值.

?有更好的想法請留言

?學習互動

感謝大家的閱讀, 如有疑問可以加我微信, 我拉你進入微信群(由於騰訊對微信群的100人限制, 超過100人後必須由群成員拉入)