JSON to TypeScript
Generate TypeScript interfaces or types from a JSON sample
Runs entirely in your browser. Nothing you type or upload is sent to us or stored.
Results are for general guidance. Please check anything important before relying on it. Terms of use
How to Use
- Paste a JSON sample, such as an API response, into the JSON sample box, or tap Open a .json file. A sample order is loaded so you can see the output straight away.
- Set the Root type name (for example ApiResponse) and choose interface or type alias.
- Pick the options you want: Add export, Make properties readonly, Null in some items makes a field optional, and String literal unions for small enums.
- The TypeScript appears on the right as you type. If the JSON has an error, the line and column are shown under the input with a Show me link.
- Tap Copy, or the Download button to save a .ts file, then check the optional fields against what the API can really return.
Turn a JSON sample into TypeScript types
Typing out interfaces for an API response by hand is slow and easy to get wrong. This JSON to TypeScript converter reads a sample response and writes the interface or type declarations for you, including every nested object and array. Paste the JSON from your browser's Network tab, Postman or the API docs, and copy the result into your React, Angular, Node or Next.js project.
A worked example
"orders":[{"orderId":"A1","status":"paid","total":499},
{"orderId":"A2","status":"pending","total":1250,"coupon":"DIWALI10"},
{"orderId":"A3","status":"paid","total":89}]}
With string literal unions switched on, this becomes:
id: number;
name: string;
email: null;
orders: Order[];
}
export interface Order {
orderId: string;
status: "paid" | "pending";
total: number;
coupon?: string;
}
Three things happened. The array key orders gave its items the singular name Order. All three orders were merged into one interface, and because only one of them had a coupon, coupon is optional. And status repeated two values across three orders, so it became a union of those values.
The rules the generator follows
| In the JSON | In TypeScript |
|---|---|
Nested object under key billing_address | A separate interface named BillingAddress |
| Two different objects that want the same name | Address and Address2; identical shapes share one interface |
| Array of objects | One merged interface; keys missing from some items become optional (?) |
| Key that is null in some items | Optional and | null (switch off the option to keep it required) |
Mixed array like [1, "two"] | (string | number)[] |
Empty array [] | unknown[] |
Empty object {} | Record<string, unknown> |
Key like first name or x-api-key | Quoted: "first name": string; |
| Array at the top level | type Root = RootItem[]; |
Names that would clash with JavaScript built-ins or reserved words get a suffix, so a key called date holding an object becomes DateType rather than hiding the global Date.
interface or type?
For object shapes they behave almost the same. Interfaces can be extended and merged, and many style guides prefer them for API models. Type aliases can also describe unions and arrays. Pick whichever your codebase already uses. A top-level array or primitive always gets a type, because an interface can't describe it.
One sample can't show everything
- A field that is null in your sample comes out as
null, because there's no way to tell what type it holds the rest of the time. Replace it with, say,string | null. - Dates arrive as strings in JSON, so they're typed
string. - A literal union lists only the values seen. If the API can also send "refunded", add it.
- Paste an array with several varied items rather than a single object. More examples give better optional fields.
The types describe your sample, not the API's contract. If the API publishes an OpenAPI spec, generating types from that is more reliable. Your JSON is processed in the browser and never uploaded, so pasting a response with real customer data is safe.