How to Generate TypeScript Interfaces from a JSON API Response

Stop typing your API responses by hand

You call an endpoint, it returns a chunky JSON payload, and now you need a TypeScript type so the compiler and your editor understand its shape. Writing that interface by hand is boring and error-prone — miss one optional field and you get a runtime undefined that TypeScript could have caught. Generating the interface from a real sample response is faster and more accurate, because the structure comes from actual data rather than your memory of the docs.

How inference works

The JSON to TypeScript tool parses your JSON and walks the value, emitting one interface per distinct object shape:

• A JSON object becomes an interface; the root name is yours to set.
• Nested objects become their own named sub-interfaces, referenced by the parent.
• Arrays are typed by unifying their elements — string[], or a named interface array like User[].
• When a key is missing from some array items, it is marked optional with ?.
• null values contribute a | null to the field's type.

A worked example

This JSON:

{
  "id": 42,
  "name": "Ada",
  "active": true,
  "roles": ["admin", "editor"],
  "profile": { "bio": "dev" }
}

generates:

export interface Root {
  id: number;
  name: string;
  active: boolean;
  roles: string[];
  profile: Profile;
}

export interface Profile {
  bio: string;
}

Notice the nested profile object was pulled out into its own Profile interface and referenced from the parent — exactly how you would structure it by hand.

Optional fields from arrays

Feed an array whose items differ:

{
  "users": [
    { "id": 1, "name": "Ada", "admin": true },
    { "id": 2, "name": "Lin" }
  ]
}

and the generator merges both samples, marking the sometimes-missing key optional:

export interface Root {
  users: User[];
}

export interface User {
  id: number;
  name: string;
  admin?: boolean;
}

Where inference falls short

• One sample cannot see everything. If a field is only sometimes present, include an array with varied items so the tool can detect the optionality. A single perfect example hides the edge cases.
• Numbers are just number. A status code or enum-like value is still typed as number or string; narrow it to a literal union yourself where it matters.
• Null-only fields. A field that is null in the sample has nothing else to go on, so its type becomes null — replace it with the real type once you know it.
• Dates stay strings. JSON has no date type, so an ISO timestamp becomes string, which is usually what you want at the boundary anyway.

Treat the output as a high-quality scaffold: correct for the data you gave it, and a few edits away from production-ready.

Conclusion

Generating interfaces from a JSON sample turns a tedious, bug-prone chore into a paste-and-copy step, and it keeps your types honest to the data your API actually returns. Before you generate, it helps to clean the payload with the JSON Formatter so you can eyeball the structure; if you also maintain config files, the JSON to YAML tool pairs well for the non-code side of the same data. Everything runs in your browser, so even private production payloads stay on your machine.