JSON to TypeScript
Generate TypeScript interfaces from a JSON sample.
FreeRuns in your browserNo signupUpdated 2026-10-29
Keys missing from some array items become optional. Mixed values become unions, such as string | null.
Status
Generated
Types
3
Interfaces or aliases emitted
Optional keys
1
Present in only some items
export interface Order {
id: number;
name: string;
paid: boolean;
customer: Customer;
items: Item[];
tags: string[];
}
export interface Item {
sku: string;
qty: number;
price: number;
note?: string;
}
export interface Customer {
email: string;
phone: null;
}Generated from one sample, so a key that happens to be null everywhere comes out as null. Edit the result where you know better.
About this tool
How it works and how to read the result.
Need this done for you?
Web app & SaaS development
SaaS products and web apps, from first version to scale.
See the serviceWhat it does
Paste a sample response and the JSON to TypeScript converter writes the interfaces for you. Nested objects become their own named interfaces. Arrays of objects are merged into a single shape, so a key that appears in only some items is marked optional and a field that is sometimes a string and sometimes null becomes string | null. Keys that are not valid identifiers are quoted. You can switch between interface and type, and mark every property readonly. The code is generated as you type and is ready to paste into a .d.ts or a module.
How to use it
- Paste a JSON sample. The more representative it is, the better the types; a list of ten records beats a list of one.
- Set the root type name to match how you will use it, such as
OrderorUserResponse. - Choose interfaces or type aliases, and whether properties should be readonly.
- Copy the output or download
types.ts, then adjust anything the sample could not tell you.
How to read the result
The status cards show how many types were produced and how many keys came out optional. Say you paste an order with three line items. You get Order, Customer and Item. Two of the three items have a note field, so Item gets note?: string. The customer's phone is null in the sample, so it comes out as phone: null; that is an honest reading of the data, and the right fix is to edit it to string | null.
Nested arrays work too: a list of lists of points becomes Point[][]. A mixed array such as [1, "a", null] becomes (null | number | string)[]. An empty array becomes unknown[], because there is nothing to infer.
Interface names come from the key, in PascalCase and singular for arrays, so line_items produces LineItem. Clashes get a numeric suffix. Treat the output as a first draft: it is faster than typing from scratch, but it cannot know about enums, dates stored as strings, or ids that should be branded types.
Validate messy input first with the JSON formatter. Typed API clients are standard in our web app development work.
Questions
Frequently asked.
Why is a key marked optional?
The sample is an array, and that key appears in some items but not all. The generator counts how many items carry each key and adds a question mark when any item is missing it. If the key should always be present, remove the question mark by hand or supply a better sample.
Why does a field come out as null?
Because every value for that field in the sample was null, so there is nothing else to infer from. Change it to the real type, such as string | null, once you know it. Samples with real data in every field produce better types.
Should I use interface or type?
Either works for plain object shapes. Interfaces can be extended and merged, and give slightly clearer error messages. Type aliases are needed for unions and tuples. Many teams pick one for consistency; the switch here lets you match whichever your codebase uses.
Your next move
Like what you see? Tell us about it.
A process that takes too long, a website that undersells you, or an idea ready to take shape. Tell us where you are and we will suggest a useful next step.
India · Working with clients worldwide