今天給大家介紹我新開發(fā)的工具"any-type", 一個(gè)vscode插件, 他可以根據(jù) javascript 字面量生成 typescript 類型.
GIF
??使用場(chǎng)景
在ts中, axios請(qǐng)求的數(shù)據(jù), 為了后面的操作, 我們都是要手動(dòng)標(biāo)注類型的, 比如:
const response = await http.get<ResponseData>("/summary");
這里"ResponseData"類型就是對(duì)接口的描述. 下面模擬一個(gè)銷量統(tǒng)計(jì)接口.
{
"code":200,
"data": [
{"name": "拼多多", "salesCount":"9999"},
{"name": "阿里巴巴", "salesCount":"8888"},
{"name": "京東", "salesCount":"7777"},
]
}
其類型描述:
type ResponseData = {
code: number;
data: { name: string; salesCount: string }[];
};
可以預(yù)想到: "接口越復(fù)雜, 類型就越復(fù)雜".
?any-type
這種類型我們可以通過"any-type"生成. 操作也很簡(jiǎn)單:
-
按"F1"鍵, 在控制臺(tái)輸入"generate" 找到"? generate typescript type (生成ts類型)",回車.
image -
在新彈出的輸入框中輸入JSON數(shù)據(jù).
1 -
回車, "類型"會(huì)自動(dòng)插入類型到編輯器.
2
??安裝
在vscode商店中搜索"any-type".
?github
如果你覺得any-type不錯(cuò), 請(qǐng)給我個(gè)小小的star吧. ??
https://github.com/any86/any-type
計(jì)劃
- 輸入接口地址, 發(fā)起http請(qǐng)求, 解析返回值.
