"category": "code-generator",
JSON to TypeScript Interface Generator
"tldr": Paste an API response and get TypeScript interfaces - nested objects become named interfaces, arrays infer element types.
Paste a JSON payload - an API response, a config file, a database document - and get TypeScript interfaces that describe it. Nested objects become their own named interfaces, arrays infer their element type, and mixed-type arrays produce union types.
This removes the most tedious step of typing an external API: instead of hand-writing interfaces from documentation, generate them from a real response and refine from there. Keys that are not valid identifiers are quoted automatically so the output always compiles.
How to generate TypeScript interfaces from JSON
- 1Paste a representative JSON payload into the input panel - the more complete the sample, the better the types.
- 2Each nested object becomes a named interface derived from its key.
- 3Array element types are inferred from the items; mixed arrays produce union types.
- 4Copy the generated interfaces into your codebase and adjust optional fields as needed.
Convert JSON to TypeScript in code
import type { Root } from "./types";
const res = await fetch("/api/orders/1042");
const order: Root = await res.json();
order.items.forEach(item => {
console.log(item.sku, item.qty * item.price);
});import { z } from "zod";
const Order = z.object({
id: z.number(),
customer: z.object({ name: z.string(), email: z.string() }),
paid: z.boolean(),
});
const order = Order.parse(await res.json()); // throws if shape mismatchesFrequently asked questions
How are null values typed?
A field that is null in your sample is typed as null, because the generator can only see one example. In practice such fields are usually "string | null" or similar - update them based on what your API actually returns, or generate from a sample where the field is populated.
Can the generator detect optional properties?
Not from a single sample - one JSON document cannot show which fields are sometimes absent. If you have multiple sample responses, compare the generated interfaces and mark fields that appear in only some samples with "?".
Why should I generate types instead of using "any"?
Typing API responses is where TypeScript pays off most: typos in field names, missing null checks, and shape changes after an API update all become compile-time errors instead of production bugs. Generated interfaces make this nearly free.
What about runtime validation?
Interfaces only exist at compile time - they do not verify that a response actually matches. For runtime guarantees, pair the generated types with a validation library like Zod, which can parse and validate the payload against a schema.
Last updated:
You might also need
Free and in-browser, like everything on JSON Console. Browse all tools →