Json to TypeScript Interface

在開發 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