JSON 轉 TypeScript Interface 產生器
只需貼上 JSON 資料，即可即時產生 TypeScript 型別定義 (Interface/Type)。
支援巢狀結構和智慧推斷可選屬性 (Optional)。
100% 在您的瀏覽器內處理： 您輸入的 JSON 資料絕不會傳送到伺服器。您可以安心地轉換包含 API 金鑰等敏感資訊的資料。
什麼是 JSON 轉 TypeScript Interface 產生器？
這是一款專為開發人員設計的免費工具，只需貼上 JSON 資料即可即時產生 TypeScript 型別定義（Interface 或 Type Alias）。它可以自動完成容易發生手動錯誤的工作，例如建立 API 整合用的型別定義或為模擬資料 (mock data) 加上型別。
它不僅能自動展開巢狀及複雜的 JSON 結構，還具備進階邏輯，可分析陣列中的物件以推斷可選屬性 (?)。
所有轉換處理皆在您的瀏覽器內完成。輸入的 JSON 資料絕對不會傳送到外部伺服器或儲存在外部伺服器上，讓您可以安全地轉換機密的商業資料或正式環境的 API 回應資料。
使用方法
貼上 JSON
將目標 JSON 資料貼入左側面板的輸入區域中。您可以直接貼上 API 回應或資料庫查詢結果。解析程序將會即時執行。
調整設定
從上方選單調整設定，例如根名稱、輸出模式 (interface 或 type)、可選推斷切換以及 readonly 修飾詞，以符合您專案的編碼標準。
複製與使用
在右側面板檢查即時產生的 TypeScript 程式碼，然後點擊「複製」按鈕。只需將其貼入您的專案編輯器中，即可開始具備型別安全的開發作業。
TypeScript 型別定義名詞解釋
- Interface
- TypeScript 中用於定義物件結構和類別實作的語法。寫法如
interface User { name: string; }，其特點是當定義多個同名介面時，允許宣告合併 (declaration merging)。 - Type Alias (型別別名)
- 使用
type關鍵字為型別命名的功能。它類似於 Interface，但更具彈性，因為它不僅可以定義物件，還可以定義基本型別、聯集型別 (Union types) 和對映型別 (Mapped Types)。 - Union Type (聯集型別)
- 允許變數保存多種型別之一的型別設定。使用管線符號 (
|) 連接型別來表示，例如string | number，通常在 API 回應可能有變化時使用。 - Optional Property (可選屬性)
- 透過在屬性名稱最後面加上
?，允許屬性不存在（未定義 undefined）的設定。當陣列中的資料缺乏統一性時，這是一個不可或缺的概念。 - Readonly 修飾詞
- 藉由在屬性前加上
readonly，可在編譯器層級防止物件建立後重新指派（修改）屬性的值。這對於確保資料結構不被改變 (immutable) 很有用。
常見問題
- Q.我輸入的 JSON 資料會傳送到伺服器嗎？
- 不會。所有解析和型別產生過程都在您的瀏覽器本機內執行。由於沒有任何資料會傳送到或儲存在外部伺服器上，因此可以安全地使用真實或敏感資料。
- Q.它可以正確轉換包含日文/中文鍵值（屬性名稱）的 JSON 嗎？
- 可以的。根據 TypeScript 語法規則，包含特殊字元或非英文字元（如日文/中文）的鍵值會被安全地輸出為用引號 ("") 括起來的屬性。
- Q.我應該輸出為 interface 還是 type？
- 這取決於您專案的編碼標準。通常，建議使用「interface」來定義物件結構，或當您打算透過宣告合併 (declaration merging) 來擴充它們時。另一方面，在需要進行複雜型別操作（如聯集型別 Union types）的環境中，通常較傾向使用「type」。
- Q.如果陣列中包含結構不同的物件會怎樣？
- 該工具的可選推斷功能會比較和掃描陣列中的所有物件。所有物件共有的鍵值將會輸出為「必要屬性」，而只存在於部分物件中的鍵值將會被智慧合併並輸出為「可選屬性 (?)」。
- Q.它可以轉換深度巢狀的 JSON 資料嗎？
- 可以。因為解析是遞迴的，所以理論上巢狀的深度沒有限制。內部物件會自動被提取為個別的介面 (interface)，並組織起來以便連接到最頂層的根型別。
使用場景
API 整合串接
在前端開發期間，貼上從外部 REST API 取得的回應 JSON 以即時建立型別定義，讓您能快速實作具備型別安全的資料獲取 (fetching)。
NoSQL 型別定義
從 MongoDB 或 Firestore 等無綱目 (schemaless) 資料庫的文件結構 (JSON) 自動產生 TypeScript 模型，以確保型別一致性。
程式碼審查輔助
從 Pull Request 上分享的範例 JSON 資料快速產生型別定義，作為審查人員驗證型別安全性的輔助工具。
學習 TypeScript
它能透過視覺化並立即顯示 JSON 資料如何對應到 TypeScript 世界中的型別結構，作為學習 Interface 設計的良好工具。
技術細節
此工具不依賴外部解析函式庫，而是使用純 JavaScript (Vanilla JavaScript) 撰寫的自訂遞迴型別推斷演算法來實作。
它會遍歷透過 JSON.parse() 安全評估的類似 AST 的物件樹，以分類基本型別（基於 typeof）和物件型別。特別是在解析陣列時，它會收集內部元素的型別，並透過比較集合運算來快速計算聯集和可選屬性。
所產生程式碼的語法突顯 (syntax highlighting) 也是透過輕量級的正則表達式替換來處理，而不是 AST 解析，這確保了輕快的使用體驗且不會阻塞瀏覽器的主執行緒。
Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.