How to use the JSON to TypeScript
- Paste a representative JSON sample, e.g. a response copied from your browser’s network tab.
- Set the root type name (for example
UserorApiResponse). - Choose
interfaceortype, the array syntax, and whether to export or mark properties readonly. - Copy the generated code into a
.tsfile or download it.
What does a JSON to TypeScript converter do?
It infers static types from example data. Instead of hand-writing an interface for every API response, you paste one real response and get matching TypeScript declarations — one named interface per nested object, typed arrays, and unions where values differ. It's the quickest way to get autocompletion and compile-time checks for data you receive from a REST API, a webhook or a JSON config file.
How types are inferred
| JSON value | TypeScript type |
|---|---|
"text" | string |
42, 3.14 | number |
true | boolean |
null | null (combined with other types, e.g. string | null) |
{ … } | A named interface (key profile → Profile) |
["a", "b"] | string[] |
[1, "two"] | (number | string)[] |
[] | unknown[] (no sample to infer from) |
Arrays of objects are merged
When an array contains several objects, the generator merges them into a single interface rather than taking the first item only. A key that appears in some items but not others becomes optional (archived?: boolean), and a key whose values differ between items gets a union type (license: string | null). Array item interfaces are named after the singular of the key — repos → Repo, categories → Category. Identical shapes found in different places are declared once and reused.
interface vs. type
For object shapes the two are nearly interchangeable. interface declarations can be extended with extends and merged by re-declaring them, and they tend to give clearer error messages; type aliases can express unions, tuples and mapped types. Many teams use interfaces for data models — pick whichever matches your lint rules (e.g. @typescript-eslint/consistent-type-definitions).
Limits of inference — review the output
A sample only shows what was there. A field that is null in your sample will be typed null; edit it to the real type (e.g. string | null). Dates arrive as ISO strings and are typed string, since JSON has no date type. Keys that aren't valid identifiers, like social-links, are quoted automatically. For runtime validation of untrusted input, pair these types with a schema validator such as Zod. Tidy your sample first with the JSON Formatter, or convert YAML configs with YAML to JSON before generating types.
Tools that pair well with the JSON to TypeScript
- CSV to JSON — Paste CSV or TSV and get a JSON array of objects.
- SVG to JSX Converter — Paste an SVG from Figma, Illustrator or an icon set and get a ready-to-use React (JSX or TSX) component — with a safe preview of the icon.
- cURL to Code — Paste a curl command — from API docs or “Copy as cURL” in your browser’s DevTools — and get ready-to-run code for six languages, with headers, body and authentication carried over.
- JSON to CSV — Turn a JSON array into a spreadsheet-ready CSV.
Frequently asked questions
Should I use interface or type for JSON data?
extends; type aliases also cover unions and mapped types. Choose the one your codebase’s style guide prefers — the toggle switches the whole output.How are optional properties detected?
?. You can also make every nullable property optional with the checkbox below the output.Why is a property typed as null?
null in every sample where it appeared, so there is no information about its real type. Replace null with the expected type, e.g. string | null, or paste a sample where the value is filled in.