Quick answer
This generator walks a JSON sample and emits TypeScript interfaces: each object becomes a named interface, scalars map to string/number/boolean, arrays become type[], and nested objects become their own interfaces. Types are inferred from the one sample you paste, so review nullable and optional fields by hand. It runs entirely in your browser — nothing is uploaded. Paste JSON, click Generate Interfaces, then copy.
How JSON maps to TypeScript
| JSON value | TypeScript type |
|---|---|
"hello" | string |
42 / 3.14 | number |
true / false | boolean |
null | null |
["a", "b"] | string[] |
[1, "x"] | (number | string)[] |
| Nested object | Named interface |
Example
JSON input:
{ "id": 1, "name": "Alice", "tags": ["admin"] }
Generated TypeScript:
interface Root {
id: number;
name: string;
tags: string[];
}
Use the generated interfaces in your TypeScript project for type checking and IDE autocomplete. Paste the output directly into a .ts file.
When to Use JSON to TypeScript
- When you receive a new API response and want to type it immediately without writing interfaces by hand — paste the sample JSON, copy the generated interfaces, and add them to your
.tsfile. - When onboarding to an existing codebase and need to understand the shape of an unfamiliar JSON payload before writing code against it.
- When building a frontend application that consumes a REST API and you want full IDE autocomplete and type checking on the response data.
- When prototyping quickly — generate a rough interface from a real API response and refine it (mark fields optional, adjust union types) as you iterate.
Worked example
A record with a nested object and an array — showing how nested objects become their own interfaces:
Input JSON
{
"id": 1,
"name": "Alice",
"address": { "city": "Boston", "zip": "02101" },
"roles": ["admin", "editor"]
}Generated TypeScript
interface Root {
id: number;
name: string;
address: Address;
roles: string[];
}
interface Address {
city: string;
zip: string;
}What happened
- The root object became
interface Root; each scalar was typed by its value (id→number,name→string). - The nested
addressobject was extracted into its owninterface Address(named in PascalCase from the key), andRootreferences it by type. - The
rolesarray of strings becamestring[]. A mixed array like[1, "x"]would instead become(number | string)[].
Edge cases & gotchas
- Types come from one sample. The interface reflects exactly the JSON you paste — a field missing from the sample won't appear, and a field that happens to be present will look required. Paste a representative response, then adjust.
nullis not the same as optional. A field that isnullin the sample becomesfield: null, which is rarely what you want. Change it tofield?: stringorfield: string | nullby hand depending on your real contract.- Large integer IDs should be strings. A 64-bit ID infers
number, but JavaScript loses precision past 253, so a value like12345678901234567890is silently rounded. Type such IDs asstring— see the BigInt serialization note. - Empty arrays and objects can't be inferred. An empty
[]has no element type to read and an empty{}has no fields, so feed non-empty examples for meaningful types. - Interfaces are compile-time only. They give you editor autocomplete and type checking but no runtime validation — if you need to verify data at runtime, pair them with a JSON Schema or a library like Zod.
Frequently Asked Questions
How does JSON to TypeScript conversion work?
The tool walks the JSON structure recursively. Each JSON object becomes a TypeScript interface. String values become string, numbers become number, booleans become boolean, null becomes null, arrays become type[], and nested objects become named interfaces derived from the key name.
How are interface names generated?
Interface names are derived from the JSON key using PascalCase conversion. The root object always becomes Root. A key named userAddress becomes UserAddress, and user_profile becomes UserProfile. Array item interfaces use the singularized key name — so a key books generates a Book interface.
Can I use the generated interfaces directly?
Yes. Copy the output and paste it into any .ts file. The interfaces are standard TypeScript and work immediately with your TypeScript compiler, VS Code IntelliSense, and other TypeScript-aware IDEs.
Is my JSON data sent to a server?
No. All TypeScript generation runs entirely in your browser using JavaScript. Your JSON data never leaves your device.
How are optional fields handled?
Fields whose value is null are typed as null (e.g. field: null). To mark a field as optional (field?: string), edit the generated interface manually — the tool infers types from the JSON you provide, so a null value does not automatically imply the field is optional in your schema.
Can I use the output with Zod or other validation libraries?
The generated output is a standard TypeScript interface, not a Zod schema. TypeScript interfaces are compile-time only and provide no runtime validation. To use Zod, translate the generated interface into a z.object() schema manually — the type mapping table above shows the equivalents.