JSON to TypeScript Interface
Convert JSON data into clean TypeScript interfaces. Includes nested types, optional fields, arrays, and union types. Runs entirely in your browser.
Input JSON
How it works
- Paste any valid JSON on the left.
- Click Convert to TypeScript — the interface appears instantly.
- All types are inferred from the JSON values: numbers, strings, booleans, arrays, objects, and
null. - Click Make all optional to prefix every field with
?.
Type mapping rules
| JSON value | TypeScript type |
|---|---|
42, 3.14 | number |
"hello" | string |
true / false | boolean |
null | null |
[1, 2, 3] | number[] |
[{...}, {...}] (array of objects) | NestedType[] |
{"a": 1} | NestedObject { a: number } |
About JSON to TypeScript Interface
Generating TypeScript interfaces from JSON turns raw data samples into compile-time-checked type definitions. It is especially useful when consuming third-party APIs, database records, or LLM responses where you know the shape of the data but do not want to type it out by hand. This tool infers interfaces, nested types, arrays, and unions directly from the JSON you paste.
Use it whenever you need a quick, accurate type for a JSON payload, or as a starting point that you then refine. Keep in mind that inferred types reflect only what the sample shows: fields absent from the sample are missing from the interface, null values become optional fields, and heterogeneous arrays become union types — so inspect the output and add optional fields or generics where your real data varies.
How interfaces are derived
The generator emits named `interface` declarations rather than inline type literals, so a nested object becomes its own interface referenced by name. Names come from capitalising the first character of the key, which leaves `user_name` as `user_name` — unlike the Go and C# generators, underscores and inner casing are preserved exactly, so the output mirrors the wire format without needing a mapping layer.
Arrays of objects are handled by merging every element into one shape, the first value winning for any key that appears with differing types across elements, then annotating the field with that merged interface. Keys that are not legal identifiers are emitted as quoted string keys, which TypeScript accepts without complaint.
Optionality and unions
A `null` value produces an optional property typed `null`, so the field is both optional and useless for further access — replace it with the union you actually expect, such as `string | null`. Nothing else is marked optional automatically, and that is the more common failure: a field absent from your sample is simply missing from the interface, and a sample rarely covers every response variant an API can produce.
The `Make all optional` button rewrites property lines with a regular expression matching an identifier followed by a colon. Quoted keys are skipped, so a schema containing keys like `odd-key` will only have its plain-identifier fields made optional. The button decides which direction to toggle by checking whether the output already contains `?:`, so pressing it twice returns to the original state.
Arrays, unions and name collisions
An array of objects produces one merged element interface — every element is folded into a single shape, with the first value winning for any key that appears with differing types across elements — and the field is annotated `Element[]`. A heterogeneous array becomes a parenthesised union, `(number | string | Mixed)[]`, so the brackets bind to the whole union rather than to its last member. An empty array becomes `unknown[]`, and an empty object becomes a `type X = Record<string, unknown>` alias rather than an empty interface.
Interface names are derived from the key, capitalised, so two keys that capitalise alike — `items` and `Items` — would declare the same identifier twice. A suffix is appended instead, and a key that is not a legal identifier is stripped to one that is, so `odd-key` yields `Oddkey`. Inferring from a sample remains the core caveat: when you need an exact contract rather than a starting point, write the interface against the JSON Schema Validator output.
Frequently Asked Questions
How do I convert JSON to TypeScript types?
Are the types accurate?
Is my data sent to a server?
Do I need an account or API key?
Can I use these tools offline?
All processing happens in your browser. No uploads, no tracking, no servers. Your API keys, configs, and private payloads stay private — 100% client-side.