JSON to TypeScript
Paste JSON and get TypeScript interfaces, including nested objects and arrays
Instructions
JSON to TypeScript Interface Instructions\n\n## Overview\nWhen you get the JSON returned by an API, writing the TypeScript types by hand takes a lot of time. This tool reads the JSON structure directly and recursively infers nested interfaces.\n\n## How to Use\n1. Paste the JSON into the input box; click "Fill Example" to see a complex example first\n2. Set the root interface name (default Root) and choose an `interface` or `type` alias\n3. If fields may be missing, check "Optional fields" to add `?` to every field\n4. Click "Generate TypeScript"; the result is output in reference order, with subtypes first and the root type last\n5. Click "Copy Result" to copy it\n\n## Notes\n- The types are inferred from this one JSON: a `null` field only yields `null`, and missing fields cannot be detected. For more accuracy, use multiple samples or add types by hand\n- When array elements have different structures, a union type is generated, for example `(A | B)[]`\n- An empty array can only be inferred as `unknown[]`; you need to fill in the type yourself\n- Field names that are not valid identifiers are wrapped in quotes, which is valid TypeScript syntax
FAQ
What if the object types in an array are inconsistent?
The tool generates one interface for each distinct structure and writes the array element type as a union, for example `(User | Admin)[]`. You can narrow it down after generation based on your actual business logic.
Why is the type of a null field null?
Because there is only this one piece of data, it is impossible to tell whether it will be a string or a number later. It is recommended to add all the types that have appeared in real data, or manually change it to `string | null`.
Does it support generating Go or Java types?
Currently it only generates TypeScript. If you want to see the structure first, the nested interface names inferred by this tool are not hard to rewrite as structs in other languages.
Related Articles
How to Use an Online JS Formatting and Minification Tool: Browser Local Processing Steps
Paste JavaScript code to complete formatting or minification locally in the browser without uploading to a server; this article provides the full operation steps, solutions for lag on large files and mobile handling, and the specific method for restoring minified code during API debugging, helping you quickly understand and organize code.
tool-tutorialsWhat to Do When Code Indentation Is Messed Up After HTML Formatting
This article clearly explains the causes of indentation misalignment after HTML formatting and the steps to fix it, covering unification of indentation characters, indentation width settings, handling lag with large files, mobile operations, and common questions, helping you quickly restore messy code to a clear, readable layout with obvious hierarchy.
tool-tutorialsHow to Use an Online JS Formatting and Minification Tool: Beginner Steps
Just paste your code into the online JS formatting and minification tool in your browser, choose format or minify, and you'll immediately get neatly formatted or smaller-sized results—while also solving common troubles like errors, lag, mobile operation, and API data viewing.
tool-tutorialsHow to Use an AI Writing Assistant: A Complete Step-by-Step Guide for Beginners from Input to Final Draft
Using a four-step workflow and a common troubleshooting checklist, help beginners get through the entire process of using an AI writing assistant from entering a prompt to finalizing a draft, and explain what to do when the results are wrong or the tool will not open.