Monu Tools

JSON 轉 TypeScript

從 JSON 範例生成 TypeScript 介面,支援巢狀型別、陣列和可選欄位。在瀏覽器中執行。

如何使用 JSON 轉 TS

  1. 01

    貼上 JSON 物件或陣列。

  2. 02

    選擇性地設定根介面名稱。

  3. 03

    複製生成的 TypeScript 介面。

What the generator does

This is a JSON to TypeScript generator that infers a set of interfaces from an example JSON object or array, so you can paste an API response and get ready-to-use types instead of writing them by hand.

It is a big time-saver when you are consuming an API or a config file: paste a response, optionally name the root interface, and copy clean TypeScript straight into your code.

Generation runs entirely in your browser, so your data never leaves your device, which matters when the sample contains real values.

How it handles real-world shapes

It handles real-world shapes: nested objects become their own named interfaces referenced from the parent, arrays of objects are merged into one interface, and union types are produced where values vary.

Optional fields across mixed arrays

When the objects in an array do not all have the same keys, the keys missing from some elements are marked optional with a question mark, which matches how the data actually behaves and keeps the types honest.

It infers, it does not enforce a schema

One important point: it infers a shape from the single sample you give it, rather than enforcing a schema. If a field is sometimes null or absent in real data but not in your sample, the generated type will not know that, so use a representative example.

常見問題

如何處理巢狀物件?

每個巢狀物件成為其自己的命名介面,從父介面引用,使結果整潔且可重用。

不同形狀的陣列怎麼辦?

物件陣列被合併為一個介面,某些元素中缺少的鍵被標記為可選。混合基本類型的陣列成為聯合元素型別。

我的 JSON 會上傳到任何地方嗎?

不會。型別完全在瀏覽器中生成,您的資料永遠不會離開裝置。

來源

嵌入此工具

將此工具加入你自己的網站。複製下方的程式碼片段,它會自動保持最新。

<iframe src="https://monu.tools/embed/zh-Hant/json-to-typescript" width="100%" height="640" style="border:1px solid #e5e5e5;border-radius:12px;max-width:680px" loading="lazy" title="Monu Tools"></iframe>

相關工具