工具用的順手嗎?
你的回饋能幫助我們做得更好
將JSON資料自動轉換為TypeScript介面或型別別名,用於前端資料模型定義與API對接。
概覽
了解工具能解決的問題、計算或處理邏輯,以及資料邊界。
這項工具把一段有效的 JSON 樣本轉成 TypeScript 宣告,適合在 API 串接、測試資料或設定檔已有實際資料、但還沒有型別草稿時使用。貼入 JSON 後,結果會依資料結構推斷欄位、巢狀物件與陣列;根型別名稱可自行設定,預設為 Root。預設輸出以 interface 描述物件,也能切換成 type 型別別名。
JSON 的字串、數字、布林值、物件、陣列與 null 是輸入資料中的值;TypeScript 則用宣告描述程式碼預期的結構。兩者用途不同:轉換結果是依樣本形成的型別草稿,並不代表伺服器永遠只會回傳這些欄位,也不會自動檢查收到的資料。
例如 {"id":42,"name":"Lin","tags":["dev"],"profile":{"city":"臺北"}} 含有數字、字串、字串陣列和一個巢狀物件。輸出會用相應的型別描述這些值,並為巢狀物件整理關聯宣告。陣列型別來自樣本中的元素;若陣列是空的,沒有元素可供判斷,結果可能只能採用較寬泛的型別。
null 表示樣本中的值為空,不等同於欄位不存在。若資料實際上可能缺少某個鍵,請根據 API 契約手動確認是否該標為可選;單筆 JSON 樣本無法完整呈現所有可能狀態。
interface 與物件形式的 type 都能表達物件欄位。若專案已有介面慣例,可保留預設設定;若希望與聯合型別等宣告方式一致,可啟用以 type 取代 interface。設定中的「僅產生型別」預設開啟;另有執行期型別檢查選項,但是否輸出相關程式碼取決於選項組合,應在採用前檢查結果並依專案需要測試。
「改善屬性名稱」可能把原始鍵名轉成較常見的程式碼命名形式。這會改變產生宣告中的屬性名稱,不會改寫原始 JSON;若程式會直接讀取 API 原始鍵名,請關閉此選項或自行加入欄位對應。
指南
依步驟完成操作,並透過範例核對輸入與結果。
從回應範例、測試資料或設定檔複製 JSON。若包含憑證或個人資料,先改成虛構值,但保留需要推斷的結構。
將 JSON 放入輸入區,工具會隨輸入更新結果。可使用格式化、載入範例或清空操作整理內容。語法無效時會顯示錯誤並清除目前輸出;JSON 字串和鍵名需使用雙引號,不支援註解、函式或尾隨逗號。
把 Root 改成具體名稱,例如 UserResponse。保留預設介面輸出,或切換為型別別名;需要時展開進階選項,確認型別推斷及屬性命名設定。
檢查欄位名稱、巢狀結構、空陣列及 null 等邊界,再複製程式碼或下載以型別名稱命名的 .ts 檔案。納入專案前,請對照正式資料契約與實際回應。
情境
查看這項工具在不同工作與生活流程中的用法。
前端工程師取得一筆 JSON API 回應後,可先產生巢狀型別草稿,再與 API 文件確認欄位是否必填、可能為空或有其他狀態。
專案中已有 JSON 測試夾具或設定檔時,可快速整理結構宣告。把結果加入程式前,應檢視陣列元素、欄位命名及未涵蓋的分支。
維護者可挑選一份具代表性的回應建立初稿,再用其他成功、空值與錯誤回應補足型別。每次擴大樣本範圍後,仍要由正式契約決定最終宣告。
問答
集中解答常見疑問與容易混淆的問題。
JSON 不等於 JavaScript 物件字面值。鍵名與字串要用雙引號,不能包含註解、undefined、函式或尾隨逗號;請先修正格式再貼上。
因為樣本沒有提供任何元素。可加入一筆非敏感的代表元素重新產生,再檢查這個元素是否涵蓋其他實際資料形態。
null 和可選欄位是一樣的嗎?不一樣。null 是鍵存在但值為空;可選欄位代表鍵可能不存在。請依 API 契約和多種回應樣本判斷,必要時手動修訂宣告。
僅有型別宣告不會驗證執行期收到的 JSON。若使用進階執行期檢查選項,仍須查看產生程式碼是否符合專案需求,並測試外部資料的處理流程。
須知
使用前了解適用範圍、結果限制與必要提醒。
推斷結果反映提供的樣本,不是完整的 API 契約,也不是資料驗證器。
推薦
查找相關工具、專題與可用的 API 能力。