My Tool Studio
Developer

JSON to TypeScript

This JSON to TypeScript tool reads a JSON sample and writes TypeScript types that describe it, updating as you type. Each nested object gets its own named type, such as Dimensions or Variant, and objects inside an array are merged into one type, with keys missing from some items marked optional. Choose interface or type declarations, or switch the output to a Zod schema for runtime checks. Other options make every property optional or readonly, turn null values into optional keys, write arrays as T[] or Array<T>, drop the export keyword and merge identical shapes into one type. Paste, drop, upload or load JSON from a URL, then copy or download the .ts file. It runs in your browser.

Always freeNo sign upRuns in your browser
Output
Declare with
Types appear here.

How to use

01

Add a JSON sample

Paste a real response or fixture, drop or upload a .json file, use Load URL, or press Try sample to load a product with nested dimensions, an array of variants and a null field.

02

Set the output

Pick TypeScript or Zod schema, type a Root name such as Product, and set the declaration style, null handling, arrays, optional, readonly and export options. The types update as you type.

03

Copy or download

Press Copy or Download .ts and paste the types into your project. Rename nested types if the generated names do not suit your code.

Why JSON to TypeScript

Example: nested JSON to named interfaces

The sample on this page is a product with nested dimensions, a list of tags, an array of variants and a supplier set to null. The second variant has a discontinued flag that the first one lacks.

With the root named Product, the tool writes three types: Product, Dimensions and Variant. Because only one variant has discontinued, that property is optional in Variant. Switch Output to Zod schema and the same structure becomes DimensionsSchema, VariantSchema and ProductSchema, written children first so each constant exists before it is used.

Review the output before relying on it. The generator only sees your sample, so a field that is a string in one response and a number in another is typed as a union only if both forms appear in the sample.

JSON in the sampleGenerated TypeScript
"dimensions": {"heightCm": 45, "baseCm": 15}dimensions: Dimensions; with interface Dimensions { heightCm: number; baseCm: number; }
"variants": two objects, one with "discontinued": truevariants: Variant[]; with discontinued?: boolean; in Variant
"tags": ["lighting", "office"]tags: string[];
"supplier": nullsupplier: null;
"id": 1042id: number;

Interface, type alias or Zod schema

All three describe the same shape. The difference is what you can do with them afterwards.

OutputExampleGood for
interfaceinterface Variant { sku: string; stock: number; }Object shapes that other interfaces extend
type aliastype Variant = { sku: string; stock: number; };Unions and mapped types built on top of the shape
Zod schemaconst VariantSchema = z.object({ sku: z.string(), stock: z.number() });Checking API responses and form data at runtime

Common questions

How are nested objects named in the generated TypeScript?
Names come from the key in PascalCase, so dimensions becomes Dimensions and shipping_address becomes ShippingAddress. Array items use a singular form, so variants becomes Variant, and a key that is not plural gets Item added, like DataItem. With Merge identical shapes ticked, two keys with the same structure share one type; otherwise a number is added, such as Dimensions2.
Why are some properties optional in the JSON to TypeScript output?
A property gets ? when it is missing from at least one object in the same array. With a single object there is nothing to compare, so every property is required. Add more varied items to the sample to get more accurate optional fields.
What type does a null value get in the TypeScript interface?
With the default setting, null is added to the union, so a field that is null in every sample is typed as null and a field that is sometimes a string becomes string | null. Set null values to Make the key optional and those keys become optional instead, such as note?: string.
How are empty arrays and empty objects typed?
An empty array becomes unknown[] and an empty object becomes Record<string, unknown>. Add a sample value to the JSON if you want a precise type.
Can the JSON to TypeScript tool output type aliases or Zod schemas?
Yes. Declare with type writes type Product = {...} instead of interface Product {...}. Switch Output to Zod schema to get z.object() schemas, with a type Product = z.infer<typeof ProductSchema> line for each one. JSON Schema output is available in the JSON Schema Validator.
Are the generated TypeScript types checked at runtime?
TypeScript types exist only at compile time, so an API that returns a different shape will not raise an error by itself. The Zod schema output closes that gap: install zod and call ProductSchema.parse(data) to reject responses that do not match.
How are JSON keys with dashes or spaces handled in TypeScript?
Keys that are not valid identifiers are wrapped in quotes, so user-id becomes "user-id": string. You then access them with bracket notation, like data["user-id"].
Is my JSON sample uploaded when generating types?
No. The types are generated by JavaScript in your browser tab, and the sample never leaves your device.

More Developer tools

View all

JSON Formatter

Beautify, minify and browse JSON as a tree

Developer

JSON Validator

Find JSON errors by line and fix them

Developer

JSON Minifier

Minify JSON and see the bytes saved

Developer

JSON to CSV Converter

Convert JSON arrays to CSV or Excel

Developer