🧩

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

    How to Use a Cron Expression Generator: Complete Beginner Steps

    Use an online tool to select the five time fields, automatically generate a standard Cron expression with a human-readable time explanation, and learn to troubleshoot execution time deviations caused by time zones and field counts, so complex schedules no longer rely on guesswork.

     tool-tutorials

    How to Use an Online CSV to JSON Tool: Beginners Can Get Started in Three Steps

    Use a three-step process to complete an online CSV to JSON tool operation, covering option settings, result validation, error troubleshooting, large file handling, mobile operation, and API debugging scenarios. Beginners can follow along to get usable JSON data.

     tool-tutorials

    What Is HTML Formatting? A Beginner's Guide to the Key Points

    Use a browser-based HTML formatting tool that runs locally to restore compressed or messy HTML into an indented, readable structure. Also understand the difference between formatting and minification, the troubleshooting order for messed-up indentation, and how to handle large files getting stuck and mobile no-install solutions.

     tool-tutorials

    The Difference Between JS Formatting/Minification and Manual Code Cleanup: Which Is More Suitable

    The difference between JS formatting/compression and manual cleanup comes down to automation versus human judgment. Formatting and compression are handled in bulk by tools according to rules—fast and consistent; manual cleanup is more flexible, suited to scenarios with special naming conventions or complex logic. For everyday development and debugging, use tools first and save human effort for the parts that truly need judgment. Understanding what JS formatting and compression means helps you decide when to use it and when to stop.

    Previous

    Remove PDF Pages

    Next

    Sleep Calculator