Generate TypeScript Types from JSON (and where the auto-generators trip up)

You've got a JSON API response and you want TypeScript interfaces for it. Here's how to generate them fast — and where the auto-generators quietly get it wrong.

The fast path

Paste your JSON, get interfaces:

{ "id": 1, "name": "Ada", "roles": ["admin"], "profile": { "active": true } }

→

interface Root {

  id: number;

  name: string;

  roles: string[];

  profile: Profile;

}

interface Profile {

  active: boolean;

}

jsonviewertool.com/json-to-typescript does this in the browser (client-side), nesting objects into their own interfaces.

Where generators trip up

A generator only sees the ONE sample you give it, which causes predictable gaps:

• 
  Nullable fields. If your sample has "avatar": null, the generator infers null — but the real type is probably string | null. Feed it a populated sample, or fix it by hand.


• 
  Empty arrays. "tags": [] infers any[] — the element type is unknowable from an empty array.


• 
  Optional fields. A field missing from your sample won't appear at all. If the API sometimes omits middleName, mark it middleName?: string.


• 
  Unions. A status that's "active" in your sample becomes string, not the literal union "active" | "banned" | "pending". Narrow it manually for the safety.


• 
  Numbers that are really enums or IDs. "currency": 840 types as number; you may want an enum or branded type.

When to use a schema instead

If the JSON has a JSON Schema or OpenAPI spec, generate types from that (json-schema-to-typescript, openapi-typescript) — it encodes nullability, optionality, and unions the raw sample can't. Sample-based generation is for quick throwaway typing; schema-based is for anything you'll maintain.

Rule of thumb

Generate from a sample to skip the boilerplate, then read every field — the generator gives you a draft, not a contract. Nullability and optional fields are where the runtime bugs hide.