JSON Swiss 標誌

JSON Swiss

TypeScript → JSON Schema 產生器

TypeScript 程式碼 輸入

正在載入編輯器…

JSON Schema（輸出） 輸出

設定

選擇產生 Schema 時的 root interface/type。

解析完全在瀏覽器內完成，你的程式碼不會離開此頁面。

貼上 TypeScript types，立即產生 JSON Schema。

支援 interfaces、type aliases、public fields、optional/readonly 與 union types。

如何將 TypeScript interface/type/class 轉為 JSON Schema（步驟指南）

這個線上轉換器（TypeScript → JSON Schema）可從真實模型（DTO、struct、class）產生 JSON Schema，方便驗證 payload、分享契約，並生成 mock JSON。

  1. 步驟 1：貼上 TypeScript（TS） 程式碼

    • 將要文件化的模型貼到左側編輯器。
    • 把被引用的型別也放在同一段程式碼中，便於產生 definitions。
    • 點擊 範例 載入範例，了解預期輸入格式。

  2. 步驟 2：選擇 根類型（如需要）

    • 若偵測到多個 definitions，選擇與你的 API payload 相符的 root 型別。
    • 輸出 Schema 會以選中的 root 為中心，並包含引用型別的額外 definitions。

  3. 步驟 3：檢視 JSON Schema 輸出

    • 重點檢查型別、必填/可選欄位，以及巢狀物件/陣列結構。
    • 當模型引用其他模型時，注意 definitions 以及 $ref 是否正確。
    • 複製或下載 Schema，用於驗證、文件或 schema-first 開發。

  4. 步驟 4：驗證或產生 mock JSON

    • 點擊 產生 Mock 資料 即可開啟已預載 Schema 的 Mock 產生器。
    • 用真實 payload 驗證 Schema，及早發現破壞性變更。
    • 若你依賴更進階的 schema 組合（例如 anyOf/oneOf/allOf），建議用 Ajv 等完整 validator 再驗證一次。

Schema keywords 支援說明

產生的 Schema 可能包含 $ref ，也可依需求補上 anyOf, oneOf, 或 allOf。當 Schema 更複雜時，建議使用完整的 JSON Schema validator；若要產生 mock，必要時可先 dereference 再生成。

相關工具

搭配這些工具一起使用：驗證 Schema、產生 mock payload、格式化 JSON 範例，並保持程式碼與契約一致。

JSON Schema Mock 產生器

由 Schema 產生範例 JSON，用於測試、fixtures 與文件。

JSON Schema 驗證器

使用常見 Schema keywords 驗證 JSON，快速定位不匹配。

JSON 轉 TypeScript 型別

由 JSON 範例產生 TypeScript（TS） 型別與模型。

JSON → JSON Schema 產生器

由代表性的 JSON 範例產生 Schema，補齊 model-first 的情境。

JSON Schema 資料庫

瀏覽物件、陣列、enum 與 constraints 的 Schema 範例與模式。

JSON 格式化

在驗證 Schema 或分享文件前，先清理並規範化 JSON 範例。

常見問題

支援哪些 TypeScript 語法？

支援 interfaces、type aliases 與含 public fields 的 classes。可處理 optional、readonly、string-literal keys、union types、arrays、Record 與巢狀引用。會忽略註解與 decorators，方便直接貼上 DTOs。

型別映射如何運作？

string/number/boolean/bigint/Date 等會映射到 JSON Schema primitives 與 formats。Foo[]/Array<Foo>、Record<string, T> 與字典結構會變成 array/object。包含 null/undefined 的 union 會讓欄位視為 optional。

classes 也支援嗎？

支援。只要 class 有 public fields（或 readonly properties）且帶型別註記，就能轉為 JSON Schema。所有處理都在瀏覽器中完成，程式碼不會離開你的裝置。

如何由 Schema 產生 mock JSON？

產生 Schema 後，點擊「產生 Mock 資料」即可開啟已預載 Schema 的 Mock 產生器，並可設定 locale、陣列大小與可選欄位。

TypeScript → JSON Schema 產生器 | JSONSwiss