tigtools

JSON 轉 TypeScript

貼上 JSON 回應或檔案,即可取得可直接放進程式碼的 TypeScript 宣告。

在瀏覽器中執行 免註冊

宣告為

使用方式

  1. 將 JSON 貼到輸入框中、開啟 .json 檔案,或試試範例。
  2. 設定根型別的名稱,例如 Order 或 ApiResponse。
  3. 選擇 interface 或 type 宣告,以及是否加上 export 和 readonly。
  4. 複製產生的 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 只會在你的瀏覽器中分析。不會上傳、儲存或用於分析。