什麼是JSON轉TypeScript？
JSON to TypeScript 將 JSON 資料轉換為 TypeScript 介面和型別定義。它能識別字串、數字、布林值、陣列和巢狀物件，並將可空欄位標記為可選並使用聯合型別。省去手動為 API 回應撰寫型別的麻煩。
若陣列裡物件的欄位不完全一致,產生器會合併它們:部分記錄缺少的欄位會被標為可選(`?`)。巢狀物件各自會產生命名介面(User、UserAddress、UserAddressGeo)。混合型別的陣列會得到聯合型別如 `(string | number)[]`。辨識到 ISO 8601 日期字串時會加上 JSDoc 提示;若某字串欄位在多筆樣本中僅出現少數固定值,會被推斷為字串字面量聯合而非單純 string。除了 TypeScript 輸出,同一份輸入還能產生另外三個頁籤:對應的 Zod 結構、填入真實範例值的模擬資料,以及 draft-07 JSON Schema。可在 interface 與 type 別名間切換、控制是否加 `export`、按 A→Z 排序鍵名,並開啟駝峰命名把 snake_case 或 kebab-case 鍵轉成符合 TypeScript 慣例的名稱。
使用方法
- 第一步——貼上 JSON 物件或陣列、拖入 .json 檔,或輸入 URL 直接取得線上 JSON。工具會分析其結構並為每個欄位推斷 TypeScript 型別。
- 第二步——自訂輸出：設定根介面名稱，在介面與型別別名之間選擇，並為可能為 null 的欄位切換可選屬性。
- 第三步——複製輸出或下載檔案。四個頁籤共用同一組設定:TypeScript 型別、對應的 Zod 執行期驗證、可直接用於測試與 Storybook 的模擬資料,以及供 OpenAPI 或表單函式庫使用的 draft-07 JSON Schema。所有巢狀物件都會自動取得各自命名的介面。
何時使用
- 替沒有 OpenAPI/Swagger 文件的 API 回應快速產生型別。
- 為腳本中要讀取的 JSON 設定(tsconfig.json、package.json)產生型別。
- 幾秒鐘內為第三方 SDK 的回傳結構搭一層帶型別的包裝。
結果
您的 API 回傳一個包含巢狀地址和偏好設定的使用者物件。貼上 JSON 回應，將根名稱設為 "User"，即可得到清晰的介面：User、UserAddress、UserPreferences——可選欄位將自動標註為 "string | null" 型別。
常見問題
- 產生器如何判斷哪些欄位是可選的?
- 若輸入是單一物件,啟用「將可空欄位標為可選」後,值為 null 的欄位會加上 `?`。若輸入是物件陣列,產生器會聯集所有記錄的鍵,只在部分記錄出現的鍵會變成可選。
- 陣列中的元素結構不一致時怎麼處理?
- 邏輯一樣:所有元素都有的欄位為必填,部分元素才有的為可選,基本型別不同的值會變成聯合型別如 `string | number`。最終的介面能描述整個陣列。
- 我該選 interface 還是 type 別名?
- interface 較容易透過宣告合併擴充,是描述 API 結構的常見選擇。type 別名在之後要搭配聯合、交集或映射型別時更彈性。執行階段沒有差異,依專案習慣即可。
- 為什麼輸出裡某些屬性名稱被引號包起來?
- 若鍵裡含有不能當 TypeScript 識別字的字元——連字符、空白、數字開頭、點號——產生器會以引號包住。型別保持合法,程式裡需以 `obj["weird-key"]` 方式存取。
- API 結構變動後,產生的型別會自動跟進嗎?
- 不會。型別只是當下 JSON 的快照,本身不會更新。常見做法是在 API 版本變動時重新產生型別,並在程式碼審查時透過 diff 比較差異。