JSON to TypeScript Interface Generator Online

What it does

The JSON to TypeScript generator reads a JSON sample, such as an API response or a config file, and writes TypeScript interfaces that describe it. Instead of typing every field by hand, you paste one real response and get types you can drop into your code, ready for fetch results, Redux state or test fixtures.

The generator looks at every value, not just the first one. Numbers become number, text becomes string, nested objects get their own interfaces, and the items of an array are merged, so a field that appears in only some items is marked optional and a field that is sometimes null is typed as nullable.

How to use

Paste JSON into the input, upload a .json file, or click Sample.
Set the root type name and choose the style: interface or type, nulls as | null or as optional fields, readonly properties and whether to export each declaration.
Copy the TypeScript or download it as a .ts file.

Invalid JSON is reported with the line and column of the problem, so you can fix the sample right away.

Example

This JSON:

{ "id": 7, "name": "Ada", "tags": ["admin"], "manager": { "id": 1, "email": null } }

becomes these declarations:

export interface Root {
  id: number;
  name: string;
  tags: string[];
  manager: Manager;
}

export interface Manager {
  id: number;
  email: null;
}

Tips

A single sample can only show what it contains. If a field can be a string or null, include an example of each, or wrap several samples in an array so they are merged.
Field names that are not valid identifiers, such as first-name, are written in quotes, so the output always compiles.
The result is a starting point. Narrow string fields to literal unions or Date where you know more than the sample does.
Need Go instead? The JSON to Go converter uses the same inference to write structs with json tags.

FAQ

› How are nested objects handled?

Every nested object becomes its own named interface, named after its key in PascalCase, so an address field gets an Address interface. Objects with exactly the same structure share one interface, and clashing names get a number, such as Address2.

› How are arrays typed?

All items of an array are merged into one item type. An array of objects becomes an array of one interface named after the singular of the key, so orders gives Order[]. Mixed arrays become a union such as (string | number)[], and empty arrays become unknown[].

› When is a field marked optional?

When it is missing from some of the objects in an array. A field that is present everywhere but sometimes null is written as T | null by default; switch null values to optional to drop the null and mark the field optional with a question mark instead.

› Should I choose interface or type?

Both describe the same object shapes. Interfaces can be extended and merged, and many style guides prefer them for object types. Type aliases are handy if you plan to combine the result with unions or mapped types. Pick whatever your codebase uses.

› Is my JSON sent to a server?

No. The types are inferred in your browser, so it is safe to paste real API responses.