JSON to TypeScript
Convert JSON data into TypeScript interfaces. Infers types from values, handles nested objects, arrays, and optional fields. Powered by quicktype-core.
Output will appear herequicktype-core. Your JSON is never sent anywhere — verify in DevTools' Network tab (the only request is for the library code itself).About JSON to TypeScript
A JSON-to-TypeScript generator infers TypeScript type definitions from sample JSON data — useful for typing API responses, configuration files, and external data sources. Uses quicktype-core (the open-source library that powers app.quicktype.io), which handles nested objects, arrays of mixed types (unions), and null and optional-field detection. Property names are kept exactly as they appear in the JSON, and date- or UUID-looking values stay `string`. Output: clean `interface` declarations (plus a `type` alias when the root is an array) ready to paste into a TypeScript codebase.
Why use a JSON to TypeScript?
Manually writing TypeScript interfaces for complex API responses is tedious and error-prone — easy to miss optional fields, mistype property names, or use `any` for nested objects. Generating from a sample response is faster, more accurate, and self-updating (re-generate when the API changes). Useful for: typing third-party REST/GraphQL responses, OpenAPI fragments, MongoDB documents, Firebase Firestore data, configuration JSON files.
Who is it for?
TypeScript developers integrating with REST/GraphQL APIs that lack official type definitions, full-stack developers typing config files (next.config.js, tailwind.config.js, custom JSON configs), frontend devs working with backend payloads, and anyone migrating a JavaScript codebase to TypeScript who needs to type pre-existing JSON data structures.
How to use the tool
Paste a JSON sample into the input area (a full response, an object, or an array); the TypeScript updates as you type
Optionally set the top-level type name (default: 'Root')
The tool emits exported `interface` declarations; there is no interface/type switch
View the generated TypeScript with inferred types for every property
Copy the result into your codebase — refine optional/nullable handling as needed
Frequently Asked Questions
How do I convert JSON to TypeScript interfaces?
Paste a JSON sample (e.g., an API response). The tool infers TypeScript types from the values: strings become `string`, numbers become `number`, booleans become `boolean`, nested objects become nested interfaces, arrays become typed arrays. Output: exported TypeScript `interface` declarations (a root array becomes an `export type` alias), with property names kept exactly as they appear in the JSON. Copy it or download it as a `.ts` file. Powered by quicktype-core, an open-source type-inference library. Runs entirely in your browser; your JSON never leaves the device.
How does the tool handle nullable / optional fields?
**`null` values** in JSON → emitted as `string | null` (or whatever the type, union with `null`). **Missing fields** in some objects but present in others (within an array of objects) → emitted as optional with `?`: `name?: string`. Pure inference from one example doesn't catch nullability — providing multiple examples (a JSON array with diverse objects) gives the inferrer more signal. For 100% accuracy, the source-of-truth schema (JSON Schema, OpenAPI spec, GraphQL SDL) is more reliable than sample-based inference.
Is my JSON sent to a server?
No — generation runs entirely in your browser via quicktype-core bundled into the page. Your JSON never reaches a server, never gets logged. Verify in DevTools' Network tab: the only request is for the tool's own code, never your JSON. Safe for sensitive API responses (auth-related JSON, internal endpoints, customer data shapes) — though see the next FAQ about don't paste real production data with PII.
Should I paste real API responses with sensitive data?
Best practice: **scrub PII first**. Even though the tool runs client-side (no server transit), pasting real customer emails / IDs / tokens into any web tool leaves traces — clipboard history, browser autofill, screen-capture if you share screenshots. Sanitize: replace PII with placeholder values (`'user@example.com'`, `'uuid-1234'`) before pasting. The inferred types are the same; the leaked-data risk is eliminated. For one-off lookups in a controlled environment, this is over-cautious; for habit, scrub.
What's the difference between interface and type alias?
Both define types in TypeScript. **`interface`**: extendable (`interface Dog extends Animal { ... }`), declaration-merging (multiple `interface User { ... }` blocks merge), conventional for object shapes. **`type`**: union/intersection support (`type Status = 'active' | 'inactive'`), conditional types, mapped types. For object shapes, prefer `interface` (slightly more idiomatic). This tool always emits `interface` for objects (and an `export type` alias only when the root JSON is an array); there is no switch, so if you need a `type` alias, rewrite the declaration by hand.
How does it handle arrays with mixed types?
Heterogeneous arrays — `[1, 'two', true]` — become tagged unions: `(number | string | boolean)[]`. For more complex cases (an array of objects with different shapes — a 'discriminated union'), quicktype-core attempts to infer the union and emit it cleanly. Real-world tagged unions are best modeled explicitly: `type Event = { type: 'click', x: number, y: number } | { type: 'submit', formId: string }`. For arrays-of-mixed-shapes, the generator's inference is a starting point — refine manually for type-narrowing precision.
What if the JSON contains dates, UUIDs, or other strings with semantics?
The generator types them as `string`: JSON has no native date or UUID types, and `JSON.parse` returns strings for them, so `string` is what your code will actually receive. The tool does not detect dates or UUIDs. For production code, define branded types: `type UUID = string & { readonly _: unique symbol }`. This way the type system distinguishes UUIDs from arbitrary strings without runtime cost. For most use cases, plain `string` is fine.
Can I generate types from multiple samples?
Only one JSON value is accepted, but if you paste an array of objects, the tool merges the element shapes: a property present in some elements but not others becomes optional, and a value with multiple types becomes a union. For richest inference, put 3-5 diverse samples (different states, edge cases, optional-field combinations) into one array. For type definitions used in production code, prefer JSON Schema or OpenAPI specs as the source-of-truth. Sample-based inference is for quick scaffolding, not authoritative typing.
Share This Tool
Found this tool helpful? Share it with others who might benefit from it!
💡 Help others discover useful tools! Sharing helps us keep these tools free and accessible to everyone.