JSON to TypeScript Interface

Generate TypeScript interfaces from JSON

Writing TypeScript interfaces to match an API response by hand is tedious and easy to get wrong. Paste a representative JSON sample and this tool infers the matching TypeScript interfaces for you, ready to drop into your project.

How it works

The generator walks the sample and types each value, naming a fresh interface for every nested object after its PascalCased key:

Example

This JSON:

{ "id": 7, "user": { "name": "Sam" }, "tags": ["a", "b"] }

generates:

interface Root {
  id: number;
  user: User;
  tags: string[];
}

interface User {
  name: string;
}

Because the types are inferred from one sample, they reflect exactly what’s in that sample — fields that are optional or absent won’t appear, so treat the output as a strong starting point. All inference happens in your browser — your data is never uploaded or stored.

Refining the generated interfaces

The generator infers types from a single sample, which means a few common situations need manual adjustment after generation:

Optional fields. If a field is sometimes absent from the API response, the inferred interface will not know that unless the sample you pasted happened to omit it. Add ? to the field name to make it optional:

interface User {
  id: number;
  name: string;
  role?: string;  // add ? if this field is not always present
}

Nullable fields. A field that can be either a value or null should use a union type:

interface Post {
  title: string;
  deletedAt: string | null;  // null returned from API when not deleted
}

Union types for discriminated responses. When an API can return different shapes depending on a status field, anyOf/discriminated unions are more accurate than a single interface. Generate each shape separately and combine them:

type ApiResponse = SuccessResponse | ErrorResponse;

number vs integer distinction. TypeScript has only number, which covers both integers and floats. If precision matters (for example, integer IDs that should never be fractional), consider adding a branded type or JSDoc comment to document the intent.

When to use interface vs type

This tool generates interface declarations, which is the idiomatic choice for object shapes in TypeScript. The main practical difference: interface declarations merge when two declarations with the same name appear in the same scope, while type aliases do not. For API responses you will rarely want merging, so either works — interface is conventional for object shapes and produces better error messages in many editors.

Working with deeply nested JSON

For deeply nested API responses, the generator creates one named interface per nested object. This is the cleanest approach — flat union types are harder to read and maintain than a proper hierarchy. For example:

{
  "order": {
    "id": 1,
    "customer": {
      "name": "Alice",
      "address": { "city": "London" }
    }
  }
}

Generates three interfaces: Root, Order, Customer, and Address — each responsible for one level of nesting. You can then import and reuse Customer and Address wherever those shapes appear in your codebase, even if they also appear in unrelated types.