JSON to TypeScript: Generating Types from Fake Data Automatically

Hand-writing a TypeScript interface for every API response is tedious and error-prone — you either skip fields or guess types wrong, and the interface silently drifts from what the API actually returns. The faster path: generate your fake data first, then generate the TypeScript interface from that same data, so the two never disagree.

Step 1: Generate a Realistic Sample

Before generating types, you need example data shaped like your real API response — nested objects, arrays, optional fields, the works. Build that shape in Dummy JSON Generator rather than typing out a fake object by hand; it's faster and less error-prone for anything beyond a handful of fields.

{
  "id": "a1b2c3",
  "title": "Wireless Keyboard",
  "price": 49.99,
  "inStock": true,
  "tags": ["electronics", "accessories"],
  "supplier": {
    "name": "Acme Corp",
    "country": "US"
  }
}

Step 2: Generate the Interface with Quicktype

Quicktype is the most reliable tool for this — it infers nested object types, arrays, and even unions when a field's type varies across your sample.

npx quicktype product.json -o Product.ts --lang typescript --just-types

export interface Product {
  id: string
  title: string
  price: number
  inStock: boolean
  tags: string[]
  supplier: Supplier
}

export interface Supplier {
  name: string
  country: string
}

The --just-types flag skips the runtime validation helpers Quicktype can also generate, giving you a clean interface file to drop straight into your project.

Step 3: Handle Optional and Nullable Fields Correctly

Type inference from a single sample has one real weakness: if a field is sometimes missing or sometimes null in production, a single example won't reveal that. Generate two or three sample variants — one with a field present, one with it omitted, one with it null — and combine them into one array before running Quicktype. It will correctly infer an optional or nullable type instead of assuming the field always exists.

npx quicktype samples.json -o Product.ts --lang typescript --just-types
// samples.json is an array of variant examples, not a single object

Alternative: VS Code's Built-In "Paste JSON as Types"

If you're already in VS Code and don't want to run a CLI, the "Paste JSON as Code" extension (or native TypeScript's paste-special in newer versions) converts clipboard JSON straight into an interface with a single keystroke — a faster option for one-off conversions during active development.

Keeping Types and Mock Data in Sync

The real risk with generated types is drift: your API changes, your fake data doesn't, and your interface quietly goes stale. A simple guardrail is a CI step that regenerates the interface from a current sample and fails the build if it differs from the committed file — that turns "we forgot to update the types" into a caught error instead of a silent bug.

npx quicktype samples.json --lang typescript --just-types | diff - Product.ts
# non-zero exit code if they differ

The Bottom Line

Don't hand-write TypeScript interfaces for API shapes — generate realistic sample data first, feed variant examples through Quicktype, and add a CI check so the types can't silently drift from the data they're supposed to describe.