Skip to content
DevTools

JSON to TypeScript

Convert a JSON sample into TypeScript interfaces or type aliases, with nested objects and arrays named and deduplicated, live in your browser.

Generated files

Generated files appear here.

Diagnostics appear here after you paste your input.

Processed locally in your browser. Your data never leaves your device.

About this JSON to TypeScript converter

Paste a JSON sample (an object, or an array of objects such as an API list response) and get TypeScript interfaces: one per object shape, nested objects and arrays handled recursively, and optional and nullable fields kept distinct. This page is the TypeScript output of the JSON to Types studio; Zod and PHP are one click away and use the same inference.

A worked example

This JSON:

[
  { "id": 1, "title": "Hello", "published": true },
  { "id": 2, "title": "World", "published": false, "editedAt": "2024-01-01" }
]

becomes:

export interface Root {
    id: number
    title: string
    published: boolean
    editedAt?: string
}

export type Root2 = Root[]

Note editedAt?:: it only appears in the second element, so it is optional. If a value had also been null somewhere, it would additionally be string | null. The array itself becomes a second, top-level alias (Root2) so it never collides with the Root interface for one element; give the root a different name (for example "Post") to avoid the renumbering.

How to use it

  1. Paste JSON, drop a file, or load an example.
  2. Choose interface or type alias, and whether fields should be readonly.
  3. Copy or download the file.

Frequently asked questions

interface or type alias?
Both are on offer. An interface is the usual choice for API response shapes: it supports declaration merging and reads well in editor tooltips. A type alias is identical in meaning here (this converter never emits anything an interface could not also express) but some codebases prefer `type` uniformly. Switch with the Style option; the rest of the output is unchanged.
Why is a field typed `string | number` instead of one type?
Because the JSON sample actually had both: at least one occurrence was a string and at least one was a number. TypeScript unions say this exactly; picking one type would hide real API behaviour (and TypeScript would then flag correct code as an error).
Why does an optional field have `?:` and a nullable field have `| null`?
They are different facts about the JSON: `?:` means the key is sometimes missing entirely; `| null` means the key is present but its value is sometimes `null`. A field can be both, and the generated type says exactly which.
Can I make every field readonly?
Yes, the Readonly fields option adds `readonly` to every property in every generated interface or type.
Does it handle deeply nested JSON?
Yes, recursively, up to 64 levels; each nested object becomes its own named interface so the output stays readable instead of one deeply nested inline type.