JSON 轉 TypeScript

新

從 JSON 範例產生 TypeScript 介面，支援巢狀型別。

Output

Root name

JSON input

TypeScript output

Runs entirely in your browser. Nothing is uploaded.

一鍵將 JSON 轉換為 TypeScript

這款 JSON 轉 TypeScript 轉換器可從 JSON 範例生成即用的介面、型別或類別，讓您再也不必為 API 回應手寫型別。將 payload 貼到左側，右側會立即出現格式正確、縮排整齊的 TypeScript — 複製它，或下載為 .ts 檔案。

這是一個快速、免費、無需註冊的替代方案：單步完成 JSON 轉 TypeScript 介面，完全在瀏覽器中執行，巢狀物件、陣列和聯合型別均自動推斷。無檔案大小限制，無每日使用配額，資料始終留在您的裝置上。

介面、型別或類別 — 您來選擇

使用輸出切換開關在 interface、type 別名或 class 之間切換。介面模式為預設模式，輸出 export interface Root { … }；型別模式產生 export type Root = { … }，適用於偏好別名的程式碼庫；類別模式在 export class 中宣告欄位。相同的 JSON 驅動全部三種模式，幾秒鐘內即可用您自己的資料進行比較。

您可以重新命名根節點、開關 export 關鍵字，選擇會被記住供下次使用 — 將此工具打造為靈活的 TypeScript 型別生成器，而非單一格式轉換器。

巢狀物件、陣列和聯合型別的智慧推斷

引擎遍歷您的 JSON，為每個物件建構一個命名介面，從其鍵名命名巢狀介面，並對陣列元素進行單數化處理 — orders 陣列變為 Order[]。相同的結構會去重為單個介面，混合型別陣列合併為聯合型別，如 (string | number)[]。

開啟 列舉偵測，重複出現的字串值會被推斷為字面量聯合型別 — 包含 "已出貨" 和 "待處理" 的狀態欄變為 "待處理" | "已出貨"，而非寬泛的 string。這種精確性使輸出看起來像是手工撰寫的。

可選欄位、null 和唯讀欄位的正確處理

真實的 API 資料往往雜亂，因此轉換器會如實處理。將 API 回應轉換為 TypeScript 時，僅出現在陣列某些項目中的鍵會用 ? 標記為可選，您來決定如何處理 null：保留為明確的 | null 聯合型別，或啟用 null → 可選，將 zip: string | null 轉換為 zip?: string。

readonly 開關為每個屬性添加 readonly 修飾符，適用於不可變模型。這些選項組合使用，可讓生成的 JSON TypeScript 型別完全符合您的專案規範。

與 quicktype、json2ts 和 MakeTypes 的比較

quicktype.io 是多語言生成的最全面選項 — 支援 Python、Go、C#、Kotlin 以及 TypeScript 之外的眾多語言。這種廣度意味著其 TypeScript 輸出有時包含 quicktype 執行期助手和額外樣板程式碼。它還在自己的伺服器上處理您的 JSON，這對機密 payload 來說至關重要。json2ts.com 更簡單，可生成基本介面，但缺少列舉偵測、readonly 支援和 null 處理選項。

MakeTypes 生成帶有執行期解析的 TypeScript 類別。UtiloKit 轉換器生成零執行期佔用的純型別 — 只需您的程式碼所需的介面或型別別名，完全在瀏覽器中執行，無需上傳伺服器，無需帳號。

設計即隱私 — 您的 JSON 永不離開瀏覽器

每次轉換都在您的分頁中使用 JavaScript 在本地完成。您的 JSON 從不上傳到伺服器、儲存或分享 — 離線也能正常運作，適合處理機密 payload、內部 API 和生產資料。收藏這款 JSON 轉 TypeScript 轉換器，隨時需要型別時使用。

寬鬆的解析器甚至接受帶有 // 註解、尾隨逗號和單引號字串的 JSON-ish 輸入，因此可以直接從編輯器貼上 JavaScript 物件字面量並獲得有效輸出。無需任何額外步驟。

Frequently asked questions

如何將 JSON 轉換為 TypeScript？

將您的 JSON 貼到輸入面板（或點擊範例載入樣本），對應的 TypeScript 會立即出現在輸出面板中。例如，{"id": 1, "name": "小明"} 會變為 export interface Root { id: number; name: string; }。點擊複製或下載 .ts 將型別直接加入您的專案。

如何從 JSON 生成 TypeScript 介面？

將輸出設定保留為 Interface（預設），每個 JSON 物件都會成為獨立的 export interface。設定根名稱欄位以控制頂層名稱。例如，{ "id": 1, "name": "小明" } 配合根名稱 User 生成 export interface User { id: number; name: string; }。巢狀物件會自動轉換為各自命名的介面。

介面和型別別名有什麼區別？

兩者描述相同的物件結構 — 使用 Interface / Type / Class 切換選擇您程式碼庫偏好的方式。Interface 模式輸出 export interface Root { … }，可透過宣告合併重新開啟和擴展；Type 模式輸出 export type Root = { … }，還可以表達聯合型別和原始型別；Class 模式輸出帶宣告欄位的 export class Root { … }。

如何處理可選或 null 欄位（? / | null）？

兩個開關控制這一點。'可選（?）用於缺少的鍵'將物件陣列中某些項目缺少的屬性標記為可選。'null → 可選'將 zip: string | null 等可空欄位改寫為 zip?: string；關閉以保留明確的 | null 聯合。組合使用以符合團隊的 null 處理風格。

在這裡貼上 JSON 安全嗎？

是的。轉換完全在客戶端進行：您的 JSON 由在瀏覽器分頁中執行的 JavaScript 解析並轉換為 TypeScript，從不上傳、記錄或傳送到任何伺服器。您可以斷開網路連線，工具仍然正常運作。

字串列舉偵測是如何運作的？

開啟「偵測字串列舉」，重複出現的字串欄（如「已出貨」和「待處理」）會被推斷為字面量聯合型別 "待處理" | "已出貨"，而非普通的 string。這使生成的型別更加精確和實用。

可以從 API 或 Swagger 回應生成型別嗎？

可以 — 貼上來自 API 的真實 JSON 回應，工具會推斷出即用的介面，可直接連接到 fetch 或 axios 呼叫，實現自動補全和型別安全。對於 Swagger/OpenAPI 端點，複製範例回應主體（JSON，而非 schema 文件）並轉換即可。

Add, subtract, multiply matrices and compute determinant, inverse and transpose for 2×2–4×4 matrices.

資料與格式