JSON 转 TypeScript interface, 粘 JSON 出干净 interface, 数组元素合并为 union, 可选字段自动识别, 根类型名可命名。
- 本地处理
- 分类 开发运维
- 适合 格式化、校验、压缩或检查和代码相关的文本。
union 和可选字段是怎么识别的
数组里形状不一样的对象会被合并成一个 interface: 某一个样本里缺的 key 会被标成可选 (?); 标量类型会叠成 union (number | string | null)。开启"严格"会忽略数组采样直接把所有 key 都标成必需, 适合你这段 JSON 本身就是唯一真相而不是采样列表的场景。
这个工具能做什么
把任意 JSON (GitHub API 响应, Stripe webhook, GraphQL data 块, 配 置文件) 粘进来, 拿到一个干净的 .ts 文件, 里面是一组 `export interface` 声明, 可以直接拖进项目里 import。推断器会读对象每个 key, 把数组里多个 object 合并成一个带 union 的 interface, 缺一 个样本的 key 会被标成 `?`, 非合法标识符 key 会自动加引号, 根类 型名也可以改成你想 import 的名字。可切换 interface 还是 type 别名, 字段是否加 readonly, 回退到 unknown 还是 any, 以及"严格 模式"(把所有 key 都标必需, 不按数组采样推断)。100% 浏览器本地, JSON 不出标签页。
工具细节
- 输入
- 文本 + 数值 + 结构化内容
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 下载
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 25 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 开发运维 · 程序员
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
JSON 转 TypeScript Interface 适合怎么用
适合穿插在写代码、查问题、做 Review、上线前的小任务里。
适合开发场景
- 格式化、校验、压缩或检查和代码相关的文本。
- 把片段整理好再放进文档、工单、提交或交接材料。
- 不切换工具,快速检查一个小 payload。
开发检查项
- 压缩、混淆这类不可逆处理,先对副本操作。
- 除非确认工具本地处理,不要粘贴密钥和敏感片段。
- 转换后的代码上线前,仍要跑自己的测试或 lint。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
接 GitHub / Stripe API 时不再手写类型
第一次接 GitHub API, 文档列了 user 对象的 40 个字段。curl 一次 拿到响应, 粘进来, 根名设为 `GitHubUser`, 复制输出到 `src/types/github.ts`。嵌套的 `plan` 对象自动变成 `GitHubUserPlan` 子接口。现在 `fetch('/user').then(r => r.json() as Promise<GitHubUser>)` 有真正的自动补全 —— 明年 GitHub 加字段, 重新粘一次, diff 文件 就能看到差异。
给 Postgres `row_to_json` 查询出类型
有一个 SQL 用 `row_to_json(addr)` join 出嵌套对象, 一行一个 record。 跑一次, 复制 JSON 列, 粘进来, 根名设为 `OrderRow`。地址子 对象会自动抽出来 `OrderRowAddress`。现在 `db.query<OrderRow[]>(sql)` 返回的就是和 SQL 形状完全对齐的类型化数组 —— 不会再有手写 interface 和 SQL 渐渐漂走的事。
给还没定形的 webhook payload 推类型
某个第三方 (Slack / Linear / Vercel) 推 event 过来, 文档过时 已久。把前 3 次的 payload 记下来, 作为一个 JSON 数组粘进来, 可选字段识别会把"不是每次都有"的字段标出来。出的 interface 不仅告诉你形状, 还告诉你哪些 key 永远在、哪些只是有时候有 —— 这比文档里写"这个字段有时候在"有用得多。
老代码 any → unknown 的迁移
老代码里 `const data: any = await res.json()`, 满天飞 any。挑 一个有代表性的响应粘进来, 生成类型, 把 `any` 替换成新接口。 每个 endpoint 重复一次。运行时没动, 只是给下一个接手的同事 留下一份"响应真实长什么样"的地图。
给新人留下内部 JSON-RPC 协议的文档
团队内部 RPC 有 `methods.json` 规范, 但响应形状从来没标过类型。 每个示例粘进来, 生成 `RpcGetUserResponse`、 `RpcListOrdersResponse` 等, 提交到 `packages/rpc-types/`。 新人现在 Cmd 点击任何一个 RPC method 都能看到响应的精确形状 —— 原本散落在 Slack 里的工程惯例搬进了类型系统。
不接 codegen 也能给 GraphQL 响应出类型
有一个一次性的 GraphQL query, 没必要为它接 codegen (小项目 / 原型 / 边角脚本)。在 playground 跑一次, 复制 `data` 字段, 粘 进来, 根名 `ViewerData`。能拿到 `data.viewer.repositories.nodes[0].name` 的自动补全, 5 秒搞定, 不用配 `.graphqlconfig`。
常见踩坑
粘一个对象进来然后期待出可选字段。单个 object 根没有模糊性, 所有 key 都是必需的。可选字段推断只在 "多个 object 组成的数组" 里生效 (有的元素有 key、有的没有)。如果你想从一个 object 出全可选的 interface, 把 JSON 包成 `[{...}]` 再粘。
忘了 JSON 数字一律变成 `number` —— 没有 int / float 区分。一个永远是 `42、43、44` 的字段类型还是 `number`, 不是字面量 `42 | 43 | 44`。需要更窄的类型用运行时校验器 (zod、valibot)。
把输出当成 JSON Schema 用。它只是 TypeScript 类型, 没有生成校验器。输出告诉编译器期望什么形状, 但运行时 API 完全可以返回任何垃圾 TS 也不会发现。在网络边界配一个运行时校验器。
粘十几兆的 JSON 然后嫌没立刻出结果。推断本身是 O(n), 但 React 重渲不免费。大 payload 先采样到 100 KB 左右 —— 推出来的形状一样。
粘 JSON5 / 带注释的 JSON 进来吃 parse error。我们用严格的 `JSON.parse` —— 末尾逗号、注释、不带引号的 key 都会失败。先剥掉, 或者借 YAML → JSON 工具走一道 (YAML 是兼容注释的 JSON 超集)。
根名设成 `user_data` 这种不是 PascalCase 的。工具会自动转 (`UserData`), 但如果你想保留 snake_case 用作导出名是做不到的 —— TS interface 名按社区约定就是 PascalCase, 我们强制一下省得后面 lint 报警。
隐私说明
你粘进来的 JSON 不会离开这个浏览器标签页。文本框内容刻意不写 进 URL —— 只有选项 (根名、声明形式、readonly、unknown-as、严格) 会通过 `useUrlState` 同步到 URL。这意味着 "分享配置" 链接给同 事打开看到的是同样的设置, 但他粘自己的 payload, 不会意外继承 你的。解析和推断走浏览器内建的 `JSON.parse`, 没有任何网络请求, 没有对文本框内容做 analytics, 也不写 localStorage。粘生产 API 响应、内部 payload、客户数据样例、还没发布的 endpoint 规范都 安全。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。