JSON 轉 TypeScript 產生器

如何將 JSON 轉換為 TypeScript – 步驟指南

使用此 JSON 轉 TypeScript 產生器，可從 JSON 範例快速產生型別安全的介面與型別，適合前端應用與 Node.js 服務。

1. 步驟 1 – 貼上 JSON 範例

   • 將具有代表性的 JSON 物件或陣列貼到左側編輯器。
   • 盡量包含巢狀物件、陣列與可為 null 的欄位，方便正確推斷型別。
   • 使用 匯入 從檔案、URL 或示例資料載入 JSON。

2. 步驟 2 – 選擇 TypeScript 產生選項

   • 設定與模型一致的 根型別名稱（例如 Root）。
   • 選擇 null 處理策略（可選 (?) 或 聯合 (| null)），與程式碼風格一致。
   • 決定輸出為 interface 或 type，配合你的專案習慣。

3. 步驟 3 – 檢查產生的程式碼

   • 確認欄位命名、型別推斷，以及陣列/物件的對應方式是否符合預期。
   • 依需求調整 根型別名稱、null 處理策略與可選的框架選項。
   • 若某些欄位推斷不準確，優化 JSON 範例後重新產生。

4. 步驟 4 – 在專案中使用產生型別

   • 將輸出放入專案的型別檔案中，並從模組匯出。
   • 在 API 回應、DTO 與執行期解析邊界使用這些型別。
   • 當 JSON payload 變動時重新產生，保持前後端同步。

5. 步驟 5 – 複製或下載

   • 將輸出複製到專案中，或下載成檔案。
   • 執行格式化/程式碼檢查工具，讓風格與專案一致。
   • 若目標語言需要序列化/解析函式庫，請在專案中加入相依套件。

// JSON 輸入
{
  "id": 123,
  "name": "Maeve Winters",
  "email": "[email protected]",
  "active": true,
  "roles": ["admin", "editor"],
  "metadata": { "plan": "pro" },
  "createdAt": "2024-03-01T10:15:00Z",
  "score": 99.5,
  "notes": null
}

// 產生的 TypeScript 型別（簡化）
export interface Metadata {
  plan: string;
}

export interface Root {
  id: number;
  name: string;
  email: string | null;
  active: boolean;
  roles: string[];
  metadata: Metadata;
  createdAt: string;
  score: number;
  notes: null;
}

相關 JSON 與 TypeScript 工具

探索更多可與本 JSON 轉 TypeScript 產生器搭配使用的 JSON 與 Schema 工具。