🧩

JSON to TypeScript

Paste JSON and get TypeScript interfaces, including nested objects and arrays

Note: The types are inferred from this JSON, not a JSON Schema. When array elements have inconsistent structures, a union type is generated, and field names that are not valid identifiers are quoted.

Instructions

JSON 转 TypeScript 接口使用说明



功能简介


拿到一份接口返回的 JSON，要手写 TypeScript 类型很费时间。这个工具直接读 JSON 结构，递归推断出嵌套的 interface。

使用方法


  • 把 JSON 粘贴到输入框，点「填入示例」可以先看一个复杂例子

  • 填好根接口名（默认 Root），选 `interface` 或 `type` 别名

  • 如果字段可能缺失，勾上「字段可选」给每个字段加 `?`

  • 点「生成 TypeScript」，结果按引用顺序输出，子类型在前、根类型在后

  • 点「复制结果」复制走


    • 注意事项


  • 类型是从这一份 JSON 推断出来的：字段为 `null` 时只会得到 `null`，缺字段也看不出来。要更准确请用多份样本或手写补充

  • 数组里元素结构不一致时会生成联合类型，例如 `(A | B)[]`

  • 空数组只能推断出 `unknown[]`，需要你自己补类型

  • 字段名不是合法标识符时会用引号包起来，符合 TypeScript 语法

    • ❓ 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 Tools

    💻

    ASCII Table
    🛡️

    Password Strength Checker
    📦

    CSS Box Shadow Generator
    🔒

    ROT13 Cipher

    📝 Related Articles

    tool-tutorials

    Can I Add My Own Statutory Holidays to the Workday Calculator and How Do I Set It Up?

    This article explains the steps and setup methods for adding custom holidays to the workday calculator, and answers common questions one by one, including troubleshooting result deviations, differences from spreadsheet functions, mobile troubleshooting, and project scheduling estimation, helping you quickly get accurate workday counts locally in your browser.

     tool-tutorials

    What's the difference between PDF to image and screenshot saving, and which should you choose?

    The core difference between PDF to image and screenshot saving is: PDF to image renders the entire page, while a screenshot is just a raster copy of the visible screen area. If you need the whole page, batch processing, or a fixed resolution, choose PDF to image; if you only need a small portion of the screen and want speed, a screenshot is easier. Understanding the difference between PDF to image and screenshots helps you avoid the common pitfall of "blurry text when captured, and a mess when printed".

     tool-tutorials

    What to Do When XML to JSON Large File Conversion Gets Stuck

    This article provides troubleshooting steps for XML to JSON large file conversion getting stuck, methods to fix incorrect structure, differences from manual format changes, mobile usability, key points for choosing no-install online tools, and how to preserve attributes during API debugging, helping you complete conversion locally and reduce repeated debugging.

     tool-tutorials

    How to Fix the Color Picker Error Unable to Read Screen Colors

    This article clearly explains the causes and handling order of the color picker unable to read screen colors error, provides step-by-step screenshot color picking operations, and answers common questions such as mobile browser color picking, inconsistent colors, and checking color values during API debugging, helping you stably obtain usable color values in the browser.

    Previous

    Remove PDF Pages

    Next

    Sleep Calculator