toolgarden.xyz
EN

JSON → TypeScript

从 JSON / JSONC / JSON5 样本推断并生成 TypeScript interface 类型定义,浏览器本地完成,方便对接接口。

输入 JSON / JSONC / JSON5

TypeScript 类型

TypeScript 类型将显示在这里

工具说明

JSON 转 TypeScript 根据一个实际样本递归推断 interface。字符串、数字、布尔值和 null 映射为对应类型,对象生成具名接口,数组使用第一个元素推断成员类型;根数组的对象类型命名为 Item,根对象命名为 Root。

这是从样本得到的起点,不是接口契约。只在其它记录出现的字段、可能缺失的字段以及联合类型无法从单个样本可靠推断,因此生成后必须结合真实 API 文档补上可选标记和更精确类型。

使用步骤

  1. 提供代表性样本

    尽量选择字段完整、包含典型数组元素的响应,避免用空数组或只含 null 的记录。

  2. 生成接口声明

    工具递归创建嵌套 interface,并把不合法的标识符 key 保留为带引号属性。

  3. 按契约修订

    补充可选属性、联合类型、日期别名和不同数组成员,再复制到项目。

输入与输出示例

注意生成的字段全部是必填,且 null 值无法推断出真实类型:这两处通常需要人工修正。

JSON 样本
{
  "id": 7,
  "name": "kit",
  "tags": ["a"],
  "owner": null
}
生成的 interface
interface Root {
  id: number;
  name: string;
  tags: string[];
  owner: null;
}

支持范围与限制

输出
从 JSON 样本推断出的 TypeScript interface 定义
推断依据
只看这一个样本。样本里没出现的字段不会出现在类型里
可选性
无法从单个样本判断字段是否可选,生成的字段默认都是必填,需要人工标注 ?
null 处理
值为 null 的字段推断不出真实类型,通常需要手工改成联合类型
数组
取首个元素推断元素类型。数组内元素结构不一致时需要人工改成联合类型
更可靠的做法
接口有 OpenAPI / JSON Schema 时应以规范为准生成类型,样本推断只适合快速起步

典型使用场景

  • 快速接入新接口

    先从实际响应得到基础类型,再由开发者按文档收紧,减少重复手写字段。

  • 整理旧数据模型

    把缺少类型声明的 JSON 配置转换成可读接口,帮助识别嵌套结构。

  • 给没有类型定义的第三方接口补类型

    对方只提供文档和示例响应时,先从样本生成 interface,再按文档补上可选性和联合类型。

使用前需要知道的事

  • 数组只用第一个元素推断,后续元素不同不会自动生成联合类型。
  • 所有出现的对象字段默认必填,工具无法仅凭样本知道字段是否可能缺失。
  • 日期和 UUID 在 JSON 中都是字符串,不会自动变成 Date 或品牌类型。

相关概念

interface
TypeScript 对对象形状的声明,可以描述属性名称、类型与可选性。
type inference
从具体值推测静态类型;样本覆盖不足时,推断结果也必然不完整。

常见问题

如何从 JSON 生成 TypeScript 类型?
粘贴 JSON 样本,工具会自动推断字段类型并生成对应的 TypeScript interface,可直接复制到项目中使用。
支持嵌套对象和数组吗?
支持。嵌套对象会拆分成独立 interface,数组会推断元素类型,混合类型会生成联合类型。
会上传我的接口数据吗?
不会。类型推断在浏览器本地完成,接口返回样本不会上传到服务器。
为什么所有字段都是必填的?
单个样本无法体现某个字段是否可能缺失。工具不会替你猜测,需要你对照接口文档给可选字段手工加上 `?`。这也是样本推断只适合起步、不能替代规范的原因。
值为 null 的字段推断成了什么?
只能推断出 null 本身,因为样本没有提供真实类型的线索。这类字段通常需要手工改成 `string | null` 这样的联合类型,具体类型要看接口文档或多找几个样本。