JSON 轉 TypeScript本機產生介面與型別別名
zh-TW

AppHelp

將 JSON 轉換為 TypeScript 型別

貼上一個 JSON 物件或一組樣本，即時取得可編輯的 TypeScript 定義，並可推斷選用欄位、調整命名、複製或下載 .ts。

JSON 型別產生工作區

貼上 JSON 樣本後立即取得可編輯的 TypeScript 定義。

本機執行
174 個字元16 行
TypeScript 輸出
array2 個型別4 個屬性
export type Root = RootItem[];

export interface RootItem {
  id: number;
  name: string;
  roles: string[];
  nickname?: string;
}

型別依樣本值推斷。用於正式環境前請核對選用欄位、null 與空陣列的真實契約。

常見任務

  • JSON 轉 TypeScript
  • JSON 轉 TypeScript 線上
  • JSON 產生 TypeScript interface
  • JSON 轉 TS 型別
  • TypeScript 介面產生器
  • JSON 陣列轉 TypeScript
  • JSON 轉 type alias
  • 前端型別產生工具
  • 本機 JSON 轉換
  • 免費 TypeScript 產生器

快速答案

貼上有效 JSON 即可即時產生 TypeScript interface 或 type。巢狀物件會產生具名宣告，陣列中的多個樣本會合併，缺少欄位可標記為選用，混合值會形成聯集型別，null 也會明確保留；所有處理都在瀏覽器本機完成。

使用步驟

  1. 1. 貼上有代表性的 JSON使用真實但不含敏感資訊的 API 樣本。陣列欄位不一致時應提供多個元素，以便推斷選用鍵與聯集型別。
  2. 2. 設定名稱與輸出結構選擇根型別名、interface 或 type、陣列寫法、選用鍵規則、readonly 與程式碼格式。
  3. 3. 檢查推斷邊界重點核對空陣列、null、混合基礎型別、日期字串以及重新命名後的屬性。
  4. 4. 複製或下載複製宣告或下載 types.ts，再依業務需求加入註解、列舉、品牌型別或執行期驗證。

範例

簡單物件

輸入
{"id":1,"name":"Ada","active":true}
輸出
export interface Root { id: number; name: string; active: boolean; }

陣列中的選用鍵

輸入
[{"id":1},{"id":2,"nickname":"lin"}]
輸出
export interface Root { id: number; nickname?: string; }

啟用缺少鍵推斷後，只在部分樣本中出現的屬性會帶 ?。

可為 null 欄位

輸入
[{"score":9.5},{"score":null}]
輸出
score: number | null;

null 會被保留，而不是靜默轉成 any。

常見情境

  • 為前端專案快速建立 API 回應介面
  • 記錄 Webhook 負載與設定檔結構
  • 在定義契約前合併比較多個物件樣本
  • 為測試、fixture 與資料管線建立起始型別
  • 把複製的 JSON 範例轉成可程式碼審查的宣告

注意事項

  • 單一樣本無法證明所有選用欄位或列舉值；包含不同物件的陣列能提供更強推斷。
  • 空陣列沒有可觀察元素，預設只能產生 unknown[] 或 any[]。
  • 類似 ISO 日期的字串預設仍是 string；即使選擇 Date，執行期 JSON 仍回傳字串。
  • camelCase 會改變屬性名，API 使用 snake_case 時可能需要映射層。
  • 靜態 TypeScript 型別不會在執行期驗證不可信資料，需要時應搭配 Schema 函式庫。

功能特點

  • 無需上傳即可即時將 JSON 轉為 TypeScript
  • 支援 interface、type 與自訂根型別名稱
  • 推斷巢狀物件、陣列、聯集型別、null 和選用鍵
  • 支援 readonly、分號、export、camelCase、Date 與陣列格式
  • 提供四類實用範例與行內 JSON 錯誤
  • 複製程式碼或下載可繼續編輯的 .ts 檔案

相關工具

JSON 格式化產生型別前先驗證並格式化 JSON。JSON Schema 產生器需要跨語言資料契約時產生 JSON Schema。JSON 差異比較比較 API 樣本，找出變動欄位和值。JSON 驗證器本機檢查語法與解析錯誤。

常見問題

可以產生 interface 還是 type？
兩者都支援。選擇 interface 或 type 後，工具會對所有物件宣告套用該樣式。
如何辨識選用屬性？
當陣列含多個物件時，若某個鍵只在部分物件出現，啟用選用鍵推斷後它會取得 ?。
如何處理 null 與混合型別？
工具會合併觀察到的型別，例如同一欄位出現 number 和 null 時產生 number | null。
空陣列會產生什麼型別？
因為沒有元素可供推斷，會依選項產生 unknown[] 或 any[]。
產生的 TypeScript 能在執行期驗證 JSON 嗎？
不能。TypeScript 型別在執行期會被移除；不可信回應需額外使用執行期 Schema 或驗證器。
我的 JSON 會被上傳嗎？
不會。JSON.parse、型別推斷、複製與 .ts 產生都在瀏覽器本機完成。