Turn JSON into TypeScript types
Paste a JSON sample, such as an API response, and get TypeScript interfaces with optional fields, unions and nested types worked out for you.
Your result is ready
JSON to TypeScript in three steps
Typing an API response by hand means reading every field of a long sample and guessing which ones can be missing. This reads the sample for you and writes TypeScript that matches it: one interface per object, nested types named after the keys that hold them, and lists merged into a single item type.
How the types are worked out
Every value in the sample is read. Strings, numbers and booleans keep their type, null stays null, and a field that holds more than one kind of value across the sample becomes a union. Objects inside a list are merged, so a key that appears in only some of them is marked optional, which is usually the thing that catches an application out when a field is missing.
Keys keep the order they were written in, including keys that are numbers, so the interface reads like the sample. A key that is not a valid name in TypeScript, such as first-name or a year, is written in quotes.
Naming
The top-level type is called Root unless you name it. A nested object is named after its key in PascalCase, a list of objects gives its items the singular form of the key, and two keys that would give the same name are told apart with a number. Choose type instead of interface if your code base prefers type aliases.
What a sample cannot tell
A type written from one sample describes that sample. A field missing from every item in it, or a number that is a string in other responses, will not show up here. Paste a longer sample, or several responses as a list, to make the types more complete.
- 1
Paste a JSON sample
- 2
Name the top-level type and choose interface or type
- 3
Copy or download the TypeScript
Frequently asked questions
How does it decide that a field is optional?
From the sample. In a list of objects, a key that appears in some items and not others is marked optional with a question mark. A key present in every item is required, so a longer sample gives a more accurate type.
What happens when a field holds different kinds of value?
It becomes a union, such as string | number. A field that is null in one item and a string in another becomes string | null, and an empty list becomes unknown[] because nothing says what it holds.
How are nested objects named?
After the key that holds them, in PascalCase, so address becomes Address. A list such as users gives each item the singular name User, and a name that is already taken gets a number added.
Is my JSON uploaded?
No. The types are worked out in your browser, so API responses with customer data or tokens in them stay on your device.