使用方式
- 將 JSON 貼到輸入框中、開啟 .json 檔案,或試試範例。
- 設定根型別的名稱,例如 Order 或 ApiResponse。
- 選擇 interface 或 type 宣告,以及是否加上 export 和 readonly。
- 複製產生的 TypeScript,或下載為 types.ts。
運作方式
產生器會走訪整份 JSON 文件,並記錄每個位置出現的值類型。每個 JSON 物件都會產生各自具名的宣告。名稱來自以 PascalCase 撰寫的屬性鍵,所以「shipping_address」會變成 ShippingAddress。陣列中的項目會以該鍵的單數形命名:「items」產生 Item,「categories」產生 Category,而看起來不像複數的鍵則會加上「Item」後綴。
同一個陣列中的所有物件會合併成一個 interface。如果某個鍵只出現在其中部分物件,就會以「?」標示為可選。如果某個值在不同位置有不同類型,則型別會是聯集,例如 string | number。null 會保留為獨立型別,所以有時為 null 的欄位會變成 string | null。空陣列會變成 unknown[],因為沒有可供推斷的內容。兩個屬性與型別完全相同的物件會共用一個 interface,而不會重複產生。不是有效識別字的鍵(例如「first-name」)會加上引號。
結果只描述你貼上的範例。若某欄位在實際上可選或可為 null,但你的範例沒有顯示出這點,結果就會將它標為必填且不可為 null;日期則會以一般字串呈現。在依賴這些型別前,請先依照你的 API 文件加以檢核。
範例
為 API 回應建立型別
貼上一筆來自你商店 API 的訂單,並將根名稱設為 Order。你會得到 Order、Customer、Item 和 Shipping 等 interface,其中 Item 上會帶有 note?: string,因為兩個項目中只有一個有 note。
唯讀設定
貼上 config.json,勾選「將屬性設為唯讀」,再將結果貼到 config.d.ts,如此一來編譯器就能攔截對設定值的意外寫入。
頂層陣列
列表端點回傳 [{…}, {…}]。將根名稱設為 Product 後,輸出會以「export type Product = ProductItem[];」開頭,接著是 ProductItem interface。
常見問題
為什麼輸出中的欄位是選填的?
因為同一陣列中至少有一個物件沒有該鍵。如果每個物件都有,就會是必填。貼上多筆記錄可得到更準確的選填欄位。
為什麼日期會被標示為 string?
JSON 沒有日期型別,因此日期會以字串傳遞。產生器不會猜測格式。如果你的程式會將它們轉換為 Date 物件,請自行更改型別。
interface 和 type 有什麼差別?
對於物件結構,兩者用法幾乎相同。interface 可以被擴充,並由後續宣告合併;type 別名無法重新開啟。請選擇你的程式碼庫已使用的風格。
它可以產生執行階段驗證,例如 Zod schema 嗎?
不行。它只會產生 TypeScript 宣告,這些宣告僅在編譯時期檢查,不會在執行階段驗證資料。
隱私權
你的 JSON 只會在你的瀏覽器中分析。不會上傳、儲存或用於分析。