前言

在開發 Angular 時常常會遇到需要將 JSON 轉換成 TypeScript Interface 的需求。手動轉換既耗時又容易出錯，這篇文章介紹一個快速轉換的小工具。

工具介紹

可以使用 Quicktype 所提供的 VSCode 小工具，可以快速的將 JSON 轉換成 TypeScript Interface。

使用方式

假設我們有一個物件：

{
  "name": "John",
  "age": 30,
  "cars": [
    { "name": "Ford", "models": ["Fiesta", "Focus", "Mustang"] },
    { "name": "BMW", "models": ["320", "X3", "X5"] },
    { "name": "Fiat", "models": ["500", "Panda"] }
  ]
}

按下 Ctrl + C 複製之後,

在 vscode 中按下 Ctrl + Shift + P 開啟命令列,

輸入 Paste JSON as Type 並按下 Enter,

接著輸入你要的 interface 的名稱,

就會自動產出 TypeScript Interface 了

image