Avexora Tools

JSON to TypeScript Interface / Type Generator

Free JSON to TypeScript converter. Turn any JSON sample into clean interfaces or type aliases, handling nested objects, arrays, unions, null and quoted keys.

About the JSON to TypeScript Interface / Type Generator

A JSON to TypeScript generator that turns a JSON sample into clean TypeScript interfaces or type aliases, automatically handling nested objects, arrays, and unions.

This generator turns one realistic JSON response into clean TypeScript declarations for the whole shape, so the compile-time types always agree with what the server actually sends. APIs deliver JSON and TypeScript wants types, and the gap between the two is where a thousand hand-rolled interfaces get written — guessed from a response, wrong the moment a field is optional, and stale the day the payload changes. Copy the result into a types.ts, paste it into your API client layer, and let the compiler catch the mismatches for you.

The inference follows the data precisely. Every object becomes its own named interface (or type alias) with a PascalCase name built from its path — a profile object inside a User record becomes UserProfile — and identical shapes encountered in different places collapse into a single shared type instead of duplicating. Primitive values map to string, number and boolean; null appears literally as null; arrays of several element types become a union such as (string | number)[]; an empty array is typed unknown[] and an empty object Record<string, unknown>, both honest about the fact that a sample carries no information. Property keys that aren't valid identifiers — first name, age-in-years, a key starting with a digit — are quoted so the output stays valid TypeScript.

Two honest limits worth knowing. The types describe the JSON you pasted: if a field is genuinely optional in production, the sample had better show an object without it — paste a few representative records to capture the variation you actually see. And the tool generates the shape, not the final design: you'll still want to hand it to your team's TS conventions. Generation runs entirely in your browser — API responses, customer records and internal payloads never leave your machine, which is exactly what you want when deriving types from production data.

How to use the JSON to TypeScript Interface / Type Generator

  1. Paste a sample JSON payload into the input area.
  2. Enter a Root type name (e.g., 'User') to name the top-level interface.
  3. Choose to generate either 'Interfaces' or 'Type aliases'.
  4. Click 'Generate TypeScript' and copy the resulting code.

Worked example

Provide `{"id": 1, "name": "A"}` and get an interface with `id: number;` and `name: string;`.

Frequently asked questions

Why does a mixed array become a union type?
Because a single element type would lie about some elements. An array mixing numbers and strings gets (number | string)[] so each element keeps its own real type. If your data should really be homogeneous, use a representative sample to get the cleaner, narrower type.
Interfaces or type aliases — which should I use?
For plain data shapes they are interchangeable, and both work in the dropdown. Interfaces are open and show richer editor hints, wonderful for shaping API contracts; type aliases can express unions, arrays and scalar types, so the tool uses them for array-of-object roots. Pick the one your codebase already uses.
What about an empty array or empty object?
A sample with no elements carries no type information, so the output is honest rather than invented: an empty array becomes unknown[], an empty object Record<string, unknown>. Provide at least one populated example to get precise types.
Is my JSON uploaded anywhere?
No — conversion runs entirely in your browser. Nothing is sent to a server, which is what makes this safe to use with real API responses and internal data while you build types.
Does it detect optional fields?
If you provide an array of objects where some fields are missing in some objects, the tool will mark those missing fields as optional using the `?` syntax in the resulting type.

More from Avexora

All Avexora products →

Business software from the team behind these free tools.

Get one practical business tip every week

Tools, templates and tactics for running your business — free, no spam.

Related tools

More developer & web utilities