JSON to TypeScript
Generate TypeScript interfaces from a JSON example, optional fields included.
Types From Real Data, Including The Awkward Parts
Writing TypeScript types for an API response by hand is slow and easy to get subtly wrong. Paste a real response here and the interfaces come out ready to use — nested objects become their own named interfaces, arrays of objects are merged so a field that only some items have is marked optional, and a value that is sometimes null is typed as nullable.
Identical shapes are declared once and reused, names are singularised from their arrays, and keys that are not valid identifiers are quoted. The parts one example cannot settle — an empty array, a date sent as a string — are exactly the parts worth a second look, and the hint below says so.
Key features
- Interfaces or type aliases — with or without export and readonly.
- Every array item read — optional fields and unions come from the whole array, not the first element.
- Nullable detection — values that are sometimes null become T | null.
- Shared shapes — two objects with the same structure share one interface.
- Safe keys — hyphenated or numeric keys are quoted correctly.
This tool runs entirely inside your browser using native Web APIs. Your files and text are never uploaded to a server, never logged and never shared with third parties.
How to use: JSON to TypeScript
- Paste your JSON
An API response, a config file or any sample document. - Name the root type
The top-level interface is named after it; nested ones are named after their keys. - Choose the style
interface or type, export, readonly and optional handling. - Copy or download
Paste into your project or save as a .ts file.
Technical specifications
| Processing location | Entirely in your browser — no server round trip |
|---|---|
| Data uploaded | None. Files and text never leave your device |
| Price | Free — no account, no trial, no usage cap |
| Category | Developer |
| Works offline | Yes, once the page has loaded |
| Browser support | Chrome 90+, Edge 90+, Firefox 90+, Safari 15+ |
| Interface languages | English, 中文, हिन्दी, Español, العربية |
Frequently asked questions
Why is a field marked optional?
Because at least one object in an array did not have it. If the field is actually required and the example was incomplete, turn off Optional when missing or remove the question mark by hand.
How are dates handled?
JSON has no date type, so dates arrive as strings and are typed as string. If you parse them into Date objects in your code, change the type after parsing — the generator cannot tell a date string from any other string reliably.
What does unknown[] mean?
The example had an empty array, so there was nothing to infer the item type from. Replace unknown with the real item type, or paste an example where the array has entries.
Should I use interface or type?
For object shapes they are nearly interchangeable. Interfaces can be extended and merged and give slightly clearer error messages; type aliases can also describe unions and primitives. Many teams simply pick one for consistency.
Is my JSON sent anywhere?
No. The conversion runs entirely in your browser, which matters when the example contains real customer or production data.