You are offline. Tools you have opened before keep working.
JSON to TypeScript
Paste JSON and get TypeScript interfaces or type aliases. Optional fields get a question mark, null values add | null, and arrays with mixed values become union types.
Free and private. Everything runs in your browser, nothing is uploaded.
Report a problem
How it works
Paste your JSONPaste a response from your API or open a .json file. Use Sample to see an example.
Adjust the optionsSet the name of the top level type and the options for this language. The code updates as you type.
Copy or downloadCopy the code into your project or download it as a file.
Interfaces for API responses
Typing the response of a fetch call is one of the most common jobs in a TypeScript project. Paste a real response here and you get one interface per object shape, with nested objects and arrays typed all the way down. Keys that are not valid identifiers, such as "Created At" or "123abc", are quoted so the type still matches the data.
Choose interface or type, whether every type is exported, and whether fields are readonly. Dates stay as string, because JSON has no date type and JSON.parse returns strings. A field that is null in every item becomes unknown, so the compiler makes you check it before use.
Frequently asked questions
Interface or type, which should I pick?
Both work for object shapes. Interfaces can be extended and merged, type aliases can also describe unions. Many teams use interfaces for API models, so that is the default.
Is my JSON uploaded anywhere?
No. The types are generated in your browser. API responses with customer data or keys never leave your device.
How are optional fields detected?
If the JSON contains a list of objects, every object is compared. A field that is missing from at least one object is marked optional. With a single object, every field is treated as required.
What happens with fields that are always null?
The type cannot be known from the sample, so the field gets a general type such as unknown, object, Any or JsonElement. Add a sample where the field has a value to get a precise type.
Why is my 1.0 typed as a decimal number?
The tool looks at how the number is written. 1.0 or 2.5 become double or float, 1 becomes an integer. If a field is whole in some items and decimal in others, the decimal type is used.
Can I use the result in production code?
Yes, the code compiles as it is in the usual setups. Review names and types before you commit it, because a sample can never show every possible value.
Does it work offline?
Yes. After you open the page once, it keeps working without an internet connection.