Paste a JSON payload and get a TypeScript interface back. Nested objects become nested type literals, arrays of objects are merged into a single element shape, and any field that is absent from some elements is marked optional. The conversion happens entirely in your browser - your JSON is never uploaded anywhere.

Convert JSON to TypeScript

Opens the tool with the TypeScript output format already selected.

Open the converter

A worked example

Take this trimmed-down order response, the kind of payload a typical e-commerce API returns:

{
  "user": {
    "name": "Ada Lovelace",
    "address": { "city": "London", "country": { "code": "GB" } },
    "roles": ["admin", "engineer"]
  },
  "orders": [
    { "orderId": "ord_1001", "total": 249.99 },
    { "orderId": "ord_1002", "total": 15.50, "giftMessage": "Happy birthday" }
  ]
}

The converter returns:

interface Root {
  user: {
    name: string;
    address: {
      city: string;
      country: {
        code: string;
      };
    };
    roles: string[];
  };
  orders: {
    orderId: string;
    total: number;
    giftMessage?: string;
  }[];
}

Two things worth noticing. First, roles became string[] rather than a tuple - the element types are unified. Second, giftMessage is marked ? optional, because it appears on the second order but not the first. That optional-field detection is the part that is tedious to do by hand and easy to get wrong.

How optional detection works

When the converter meets an array of objects, it does not emit a union of every distinct shape. Instead it merges them: the element type contains the union of all keys seen across every element, and a key is marked optional if it is missing from at least one of them.

This is almost always what you want from an API sample. A response containing three records where one lacks deletedAt tells you deletedAt is nullable in the schema, not that there are two different record types.

How to use it

  1. Copy a JSON response from your API client, browser DevTools, or a .json file
  2. Open the converter - the TypeScript format is preselected
  3. Paste into the left box, or drag a .json file onto it
  4. Click Extract Keys (or press Ctrl/Cmd + Enter)
  5. Copy the interface, or download it as a file

Limitations worth knowing

  • Types are inferred from one sample. A field that is null in your sample is typed as null - widen it to string | null or whatever it should be. Feed the converter a representative payload.
  • Empty arrays become unknown[]. There are no elements to infer from, so you will need to narrow the element type yourself.
  • Numbers are all number. JSON does not distinguish integers from floats, so neither can the converter.
  • The root type is named Root. Rename it to something meaningful for your codebase.
  • Nested types are inlined, not extracted. If you want Address as its own named interface, split it out by hand.

Other output formats

The same tool produces several other views of the same JSON:

Further reading