interface Profile {
age: number;
city: string;
}
interface RootObject {
id: number;
name: string;
active: boolean;
roles: string[];
profile: Profile;
lastLogin: null;
}About JSON to TypeScript
After getting a JSON response from the backend, frontend developers often hand-write matching TypeScript interfaces — tedious and easy to get out of sync with real data. This tool parses sample JSON locally in your browser, recursively infers nested objects, array elements and field types, and generates interface (or type) definitions. All inference is local with nothing uploaded, so you can safely paste responses containing real business fields. Tip: Bookmark this tool for quick access whenever you need format conversion. All processing happens locally in your browser — no data upload, so feel free to paste sensitive content.
Use Cases
- Integrate backend APIs — Paste the JSON an API returns and instantly get types ready for the frontend, avoiding hand-written mistakes.
- Generate DTO types — Quickly create data-transfer-object types for request/response bodies to align the contract across layers.
- Type third-party SDKs — When a third-party API ships no type declarations, reverse-engineer usable interfaces from a sample response.
- Model mock data — Generate types from mock JSON so tests and component props are type-checked.
- Refactor legacy code — Replace scattered any types with precise interfaces derived from real JSON to improve type safety.
- Generate GraphQL fragments — Paste a GraphQL response JSON and derive TypeScript types matching the query result shape.
- Type event payloads — Infer an interface from a sample event-bus message so event handlers are fully typed.
FAQ
How are nested objects handled?
Each nested object is extracted into its own named interface and referenced from the parent, keeping the structure clean and reusable.
What if array items differ in type?
The tool merges the types of all array elements into a union (e.g. (string | number)[]) to match the real data as closely as possible.
What does a null field infer to?
A null value is inferred as the null type. If a field can be empty, generate from a non-null sample for a more precise type.
interface vs type?
They are interchangeable in most cases. Checking "Use type" outputs type aliases, handy when you need unions or intersection extensions.
Can I tweak the result?
Yes — the output is standard TS code you can rename, comment, or mark fields optional after copying. Pair it with our JSON Formatter to tidy data first.
Any browser compatibility requirements?
This tool works in all modern browsers (Chrome, Firefox, Edge, Safari). No plugins or extensions required.
Can I use it offline?
After initial load, most features work offline. The core logic runs entirely in your browser with no network dependency.