Convert JSON to TypeScript
interfaces. Nested,
typed, ready to use.
Generate TypeScript interfaces from any JSON sample. Nested objects become separate interfaces, null values become optional fields, arrays get their item type inferred. Runs entirely in your browser.
field?: type).
No external library — runs on vanilla JS.
How to convert JSON to TypeScript
Three steps — paste a sample and drop the interfaces into your project.
Paste a representative JSON sample
Use a real API response where all fields are present with non-null values. The generator infers types from values — a null field becomes optional (field?: unknown). For best results, use the most complete instance you have available.
Set interface name and options
Enter the root interface name (e.g. User, ApiResponse). Choose between interface and type alias output. Toggle readonly for immutable data structures, and enable camelCase conversion if your JSON uses snake_case keys from a backend API.
Copy and use in your project
Click Generate and copy the TypeScript interfaces directly into your project — or download as a .ts file. The interfaces are ready to use with fetch(), axios, React state, Redux store or any TypeScript codebase.
How JSON types map to TypeScript
The type inference rules the generator applies to each JSON value.
| JSON value | TypeScript type | Notes |
|---|---|---|
"Alice" |
string |
All JSON strings become string. Add as const manually for literal types. |
42 / 98.5 |
number |
Both integers and floats map to number — TypeScript has no separate integer type. |
true / false |
boolean |
Direct mapping. |
null |
field?: unknown |
Null in the sample means the actual type is unknown — field becomes optional. Refine manually after generating. |
["a", "b"] |
string[] |
Item type inferred from first element. Empty array → unknown[]. |
[{…}, {…}] |
ChildName[] |
Array of objects → separate interface + typed array. |
{…} |
ChildName |
Nested object → separate named interface derived from the key in PascalCase. |
When do you need JSON to TypeScript interfaces?
Common front-end and full-stack workflows.
Typing REST API responses
When fetching data from an API in TypeScript, the response is typed as any by default. Generating an interface from a real response sample gives you full autocomplete and type safety for the entire response structure — without writing types by hand.
React state and props
React component props and useState hooks require typed interfaces. Generating from a sample API response or a config object gives you a starting point for the prop or state type — ready to pass to React.FC<Props> immediately.
Database model typing
Prisma, Supabase and Drizzle return query results as typed objects, but sometimes you need to type raw JSON from a jsonb column, a Redis value or a third-party integration. Generating from the actual stored value gives you accurate types.
SDK and client generation
When building a client SDK for an API, you need a TypeScript interface for every request and response shape. Generating from the API documentation examples — or from real responses in Postman — produces an interface file you can ship directly in the SDK package.
JSON to TS in one step: from an API response to typed code
Most people search for "JSON to TS" with an API response in hand. Paste it here and you get one interface per object, ready to type the fetch result: const user: Root = await res.json();. A single sample cannot tell whether a key is always present, so review optional fields before you commit the types.
For runtime validation, create a schema with JSON to JSON Schema. Need sample data for interfaces you already have? Use TypeScript to JSON.
Related JSON tools
TypeScript generated
in your browser. No upload.
The entire interface generation runs in JavaScript locally. Your JSON is parsed and traversed entirely in your browser — it is never transmitted to any server, never stored, and gone the moment you close the tab.
The generated code follows TypeScript conventions: PascalCase interface names, camelCase field names, correct type inference for all JSON value types, and separate named interfaces for nested objects — exactly matching what you would write by hand.