JSON to TypeScript Converter

How to convert JSON to TypeScript

1. Paste JSON into the left box, drop a .json file on it, or press Upload. If the JSON has a syntax error, the status line shows the line and column — format and validate it first if it needs more cleaning up.
2. The TypeScript appears on the right as you type. Set a root name for the top-level type, choose interface or type alias, and toggle export, readonly and unknown[] for empty arrays as needed.
3. Switch Output to Zod schema for a matching runtime validator instead of (or to copy alongside) the TypeScript.
4. Press Copy, or Download to save it as a .ts file.

JSON to TypeScript example

This JSON has a nested object, an array of objects with an inconsistent key, and a null value:

{
  "id": 101,
  "name": "Ada Lovelace",
  "active": true,
  "roles": ["admin", "editor"],
  "address": { "city": "London", "zip": "W1A 1AA", "country": null },
  "orders": [
    { "id": 1, "total": 42.5, "note": "Gift wrap" },
    { "id": 2, "total": 17 }
  ]
}

converts to this TypeScript. Notice note becomes optional (it's missing from the second order), country is null, and Address/Order (singularized from the orders array) become their own named interfaces:

export interface Address {
  city: string;
  zip: string;
  country: null;
}

export interface Order {
  id: number;
  total: number;
  note?: string;
}

export interface Root {
  id: number;
  name: string;
  active: boolean;
  roles: string[];
  address: Address;
  orders: Order[];
}

Arrays, unions and optional properties, explained

When an array's items are objects, the converter doesn't create one interface per item — it merges every item into a single shape:

• A key present in every item is required. If its value's type differs between items, the property becomes a union: id: number | string.
• A key missing from some items becomes optional: note?: string — exactly what happened to note above.
• A mixed-type array of primitives (not objects) becomes a union array. [1, "two", true] converts to:

export type Root = (number | string | boolean)[];

How null is handled

A property that is only ever null becomes field: null. A property that is null in some places and something else in others becomes a union, like country: string | null in the example above — the convention TypeScript's strictNullChecks expects, and the same pattern most hand-written API types use.

Interface vs type in TypeScript

For a plain object shape the two are nearly interchangeable. With the type alias option, the same small example converts to:

export type Root = {
  active: boolean;
};

Interfaces can be extended later by re-declaring them (declaration merging) and read slightly more clearly in editor tooltips; type aliases can additionally name unions and tuples directly. Pick whichever matches your codebase's convention — most teams standardise on one for generated data shapes.

Naming, quoting and de-duplication rules

Interface names come from the property key, PascalCased. Keys that are not valid TypeScript identifiers are quoted automatically:

export interface Root {
  "user-id": number;
  "2fa": boolean;
  display_name: string;
}

Structurally identical shapes are de-duplicated to one interface, wherever they occur. Here a and b hold the exact same shape ({ x: number }), so both reference the same interface instead of two nearly-identical ones:

export interface A {
  x: number;
}

export interface Root {
  a: A;
  b: A;
}

JSON to Zod schema (bonus)

Switching Output to Zod schema generates a matching Zod validator instead of (or alongside) the TypeScript, so you can validate data you don't control — an API response, webhook payload or form submission — at runtime, not just check it at compile time:

import { z } from 'zod';

export const AddressSchema = z.object({
  city: z.string(),
  zip: z.string(),
  country: z.null(),
});

export const OrderSchema = z.object({
  id: z.number(),
  total: z.number(),
  note: z.string().optional(),
});

export const RootSchema = z.object({
  id: z.number(),
  name: z.string(),
  active: z.boolean(),
  roles: z.array(z.string()),
  address: AddressSchema,
  orders: z.array(OrderSchema),
});

Pair it with z.infer<typeof RootSchema> to get the TypeScript type back out of the schema itself, so the two never drift apart.

JSON to TypeScript in your editor or from the command line

• Quicktype (multi-language, more setup): npm install -g quicktype, then quicktype input.json -o output.ts.
• json-schema-to-typescript (starts from a JSON Schema, not raw JSON): npx json-schema-to-typescript schema.json > output.ts.
• VS Code: the "JSON to TS" extension pastes interfaces from your clipboard directly into a file.
• This page: no install, works from raw JSON directly, and adds a Zod schema in the same click.

Related developer tools

• JSON formatter & validator: clean up or validate JSON (line/column errors) before converting it.
• JSON viewer: explore a large JSON response as a collapsible tree before deciding what to type.
• JSON to YAML converter: turn the same JSON into a Kubernetes/Compose-ready YAML file instead.

Frequently asked questions