今天給大家介紹我新開發的工具"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請求, 解析返回值.