跳到正文

JSON 转 TypeScript 类型

JSON to TypeScript

从一份 JSON 样例推断 TypeScript 接口或类型,合并可选字段和联合类型。

粘贴一份 JSON 响应,得到对应的 TypeScript 接口。推断会合并样本里的每一条记录,而不是只读第一条,所以只在部分记录里出现的字段会推成可选而不是必填——这就是「能编译的类型」和「真实的类型」之间的差别。

🔒 完全在你的浏览器里运行typescriptjsoncodegentypes
生成语言

示例 JSON

拖入 .json 文件

在这个标签页里读取,不上传。

手上有几条就全放进来。每多一条记录,推断就更收紧一点——某条里缺了的字段,正是它被判成可选的依据。

TypeScript

怎么用

  1. 有多少条记录就粘贴多少

    每个数组的每个元素都会被读取并合并,不只是第一个。三条记录告诉它的远比一条多,因为某个字段在其中一条里缺失,正是让那个字段变成可选的依据。

  2. 给根类型起名

    嵌套对象按持有它的键命名,数组会转成单数,所以 `users` 得到 `User`。只有根需要你起名。

  3. 读输出下方的计数

    类型数、可选字段数、联合类型数,以及合并了多少条记录。联合类型计数大于零,说明某个字段在你的样本里出现过两种不同的值——把结果粘进代码库之前值得看一眼。

  4. 把接口复制出去

    输出是一组按声明顺序排列的导出接口,可以直接粘进 `.d.ts`,或放在返回它们的 fetch 旁边。

常见问题

这是校验器吗?

不是。TypeScript 类型在构建时被擦除,所以这里没有任何东西在运行时检查响应——服务端一改形状,交给你的值就会在类型上撒谎。如果你需要这个检查真的发生,在同一个界面输出 Zod 并用它来解析。

一个日期字段为什么被推成 `string`?

因为它在 JSON 里就是字符串。推断是结构性的——它报告值是什么,不会猜一个长得像 ISO-8601 的字符串应该变成 `Date`。要不要收窄,是关于你代码库的决定,不是关于样本的。

一个字段有时是字符串、有时是数字怎么办?

它会变成联合类型 `string | number`,底部的联合类型计数加一。这通常是关于接口的信号,而不是关于类型的——一个会变种类的字段,是下游某处等着爆的 bug。

会从样本里生成字面量类型吗?

不会——三条记录里都是 `"active"` 的 `status` 仍然输出为 `string`。三条记录不足以证明它是枚举,从太少的数据里推出来的字面量类型,正是一周之后让构建挂掉的那种东西。

可以从这些接进来

接下来

这些工具吃得下当前工具的产出,结果可以直接送过去。