🧩

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 an ASCII Table Lookup: Complete Step-by-Step Guide for Beginners

    Master the three input methods of ASCII table lookup—character, decimal, and hexadecimal—understand the coverage difference between ASCII and Unicode, and learn to troubleshoot practical issues such as unresponsive pages, mobile input, invisible characters in API debugging, and large-file sampling, so encoding verification is done right the first time.

     tool-tutorials

    How to Convert HTML to Markdown? Step-by-Step Guide for Browser-Based Local Conversion

    Use a browser-based local conversion tool to turn HTML into Markdown without uploading files. Paste the source code to get clean text. This article provides a five-step workflow, explains the causes and fixes for errors in headings, tables, and links, and describes the cleaning order for API response data, helping you complete the conversion in minutes and reduce rework.

     tool-tutorials

    How to Use an Online JS Formatter and Minifier: No-Install Steps

    Paste code, choose format or minify, copy the result—three steps to format and slim down JavaScript code. This article explains the no-install operation steps, the difference between formatting and code beautification, how to troubleshoot lag on large files and when it's not working, and practical usage in API debugging, helping you quickly process JS code without installing any software.

     tool-tutorials

    How to Use an Online CSS Formatter and Minifier: Format Code Directly Without Installation

    Paste CSS code and switch between format and minify modes with one click. Processing runs locally in the browser without uploading code. Includes methods for speeding up large files, mobile operation, and troubleshooting style failures. Follow along to finish code organization and pre-deployment minification.

    Previous

    Remove PDF Pages

    Next

    Sleep Calculator