JSON to TypeScript Interface Generator
Paste JSON, get TypeScript interfaces. Nested objects become named interfaces, mixed arrays become union types, and null fields are flagged optional. Free and 100% in your browser — no signup.
Try a Sample
Nested Interface Generation
Each nested object becomes its own named interface — easier to import, reuse, and refactor than a single 500-line anonymous type. Names are deduplicated automatically.
Full Style Control
Toggle `interface` vs `type`, `export` keyword, semicolons, root-name override, and array union behavior. Match your team's exact lint config without touching the output.
Heterogeneous Array Unions
When an array contains mixed types (`["a", 1, true]`), we emit a proper TypeScript union: `(string | number | boolean)[]`. No data loss, no `any` escape hatches.
100% Client-Side
Type inference runs in your browser. API responses with auth tokens, customer PII, or internal schema details never leave your device.
JSON to TypeScript: Generate Interfaces and Types from Any JSON
A JSON to TypeScript converter reads a JSON sample and produces matching static types. Paste an API response or config object and it infers a type for every field: strings, numbers, and booleans map directly, each nested object becomes a named interface, mixed arrays become union types, and null fields are flagged optional. It runs 100% in your browser, free, with no upload.
How to convert JSON to TypeScript
- Paste valid JSON into the input — an API response, a config blob, or a sample payload. The output updates instantly.
- Set a meaningful Root Name (for example
StripePaymentIntent) so the top-level type reads well. - Choose interface or type as the declaration style to match your team's lint config.
- Toggle export, semicolons, and Array Unions to fit your code style.
- Press Copy to grab the generated TypeScript, then refine: tighten nullable fields, narrow string literals, add
readonly.
How JSON-to-TypeScript inference works
The tool parses your input with the browser's native JSON.parse — so it accepts exactly the grammar defined by RFC 8259 and ECMA-404 (the two specs that define JSON). It then walks the parsed tree and emits a type for each node. JSON has only six value kinds — string, number, boolean, null, object, array — which is why inference is reliable: there is a small, fixed mapping to TypeScript primitives, named interfaces, and array types.
One JSON quirk to know: JSON numbers are a single type backed by IEEE 754 doubles, so an integer like 9007199254740993 (253+1) loses precision the moment JSON.parse reads it — both 9007199254740992 and 9007199254740993 round to the same double. The tool can only type such a field as number; if your API sends 64-bit IDs, keep them as strings in the JSON.
"unknownis the type-safe counterpart ofany. Anything is assignable tounknown, butunknownisn't assignable to anything but itself andanywithout a type assertion or control-flow-based narrowing."— TypeScript 3.0 release notes
That is why an empty array generates unknown[] rather than any[]: with no element to inspect, unknown keeps the value type-checked until you replace it with the real element type. For deeper background on the format itself, read the JSON validation & formatting guide or the JSON vs YAML vs XML comparison.
Worked examples: JSON → TypeScript
Nested object · one interface per object
{ "user": { "id": 7, "name": "Ada" } } → export interface RootObject { user: User; } export interface User { id: number; name: string; }
Mixed array · union type (Array Unions on)
{ "values": [1, "two", true] } → export interface RootObject { values: (number | string | boolean)[]; }
Non-identifier key · quoted property
{ "first-name": "Ada", "user.id": 7 } → export interface RootObject { "first-name": string; "user.id": number; }
Edge case · the null trap
{ "email": null } → email?: null
A field that is null in the sample becomes optional (email?: null) — not email: string | null. One sample can't reveal the real nullable type, so always widen it by hand: change email?: null to email: string | null. Optional ?: means "may be absent", which is a different contract from "present but null".
JSON to TypeScript type-mapping reference
Exact mappings this tool applies, straight from its inference logic. Use it to predict the output before you paste.
| JSON value | Inferred TypeScript | Notes |
|---|---|---|
| "hello" | string | Literal types not inferred — narrow to a union by hand |
| 42, 3.14 | number | JSON has one numeric type; ints and floats both map to number |
| true, false | boolean | Maps directly |
| null | field?: null | Marked optional; widen to T | null after review |
| { ... } | Named interface | One interface per object; PascalCase name, deduped (User2) |
| [1, 2] | number[] | Homogeneous array; element name auto-singularized |
| [1, "a"] | (number | string)[] | Union when Array Unions is on; first type only when off |
| [ ] | unknown[] | No element to infer; type-safe top type, not any[] |
The edge cases most generators get wrong
Two behaviors set this generator apart. First, identifier sanitizing: a JSON object named after a reserved word becomes a safe interface name — a key called interface or class yields an interface named Interface_, and a name that starts with a digit (1stPlace) gets a leading underscore (_1stPlace). Output that would not compile is silently fixed.
Second, root-type handling: when the top-level JSON is a primitive or array rather than an object, the tool emits a type alias instead of an interface — ["a","b"] becomes type RootObject = string[], regardless of whether you picked the interface style. You can't write interface Foo = string[] in TypeScript, so the tool quietly does the correct thing. Array element names are also auto-singularized (categories → Category), so nested interfaces read naturally.
Runs 100% in your browser
Your JSON never leaves your device. Parsing, type inference, and serialization all run locally in JavaScript, and copying uses your browser's native clipboard — no uploads, nothing leaves your device. I tested the converter on real GitHub and Stripe API payloads, deeply nested config objects, mixed arrays, reserved-word keys, and root-level arrays, in both interface and type modes with every toggle flipped. The output stays instant and copy-paste-ready.
Frequently asked questions
Is this JSON to TypeScript converter free?
Yes — 100% free with no signup and no usage cap. Generate unlimited interfaces from any size of JSON. It runs in your browser, so it also works offline once the page has loaded.
Is my JSON uploaded anywhere?
No. Everything runs in your browser with JavaScript. API responses with auth tokens, customer PII, or billing data never leave your device — the tool makes zero network requests.
Why is my null field marked optional instead of nullable?
A single sample can't reveal a field's real nullable type, so a null value becomes field?: null. Widen it by hand to field: string | null — optional ?: means "may be absent", which is a different contract from "present but null".
Should I use interface or type?
For plain object shapes they type-check identically. Pick interface for object contracts and declaration merging, type if your team standardizes on it. When the root JSON is a primitive or array, the tool emits a type alias regardless.
Related developer & data tools
Validate & pretty-print the source payload first
JSON Schema GeneratorRuntime validation alongside your TS types
JSON DiffCompare two payloads to spot shape changes
JSON ↔ YAML ConverterSwitch between JSON and YAML configs
CSV ↔ JSON ConverterTurn tabular data into JSON to type
YAML ValidatorValidate YAML before converting to JSON
XML FormatterTidy and indent XML documents
SQL FormatterFormat queries that return this JSON
Base64 EncoderDecode Base64-wrapped JSON payloads
All ToolsBrowse the full Toolk utility hub
Guide: JSON ValidationRead the JSON validation & formatting guide
Guide: JSON vs YAML vs XMLCompare the three data formats
Last updated: June 2, 2026 · Runs 100% in your browser — no uploads, nothing leaves your device.
Need a different tool?
Browse all 89 free, in-browser tools — or tell us what we should build next.