JSON 转 TypeScript 接口工具

粘贴 API 响应或设置文件中的 JSON 示例。工具会写出描述它的 TypeScript 接口,每个嵌套对象都有一个名称。您粘贴的内容不会离开浏览器。

免费 在浏览器中运行 核对于2026年11月10日星期二

一个典型的 JSON 对象或数组。数组中的多个项会合并为一个接口。

一个简单的名称,例如 Root、Product 或 ApiResponse。

当这些类型要在另一个文件中被导入时,请勾选。

结果

TypeScript 接口 — 可复制代码,或下载为 types.ts。
声明数量 — 代码中接口和类型别名的数量。
TypeScript 接口

此工具在您的浏览器中运行。您输入的内容不会发送给我们。

使用方法

  1. 把一个典型的 JSON 值粘贴到“JSON 示例”中。输入时,类型即会出现。
  2. 在“根接口名称”下输入最外层对象的名称,例如 Product。
  3. 若类型保存在同一个文件中,请取消勾选“每个声明前写入 export”。
  4. 复制“TypeScript 接口”,或下载为 types.ts。

类型是如何推断出来的

每个 JSON 对象变为一个接口。它的名称取自保存它的键,并采用帕斯卡命名法(PascalCase):键 first-name 得到 FirstName。数组中的项采用数组键的单数形式,items 得到 Item。若名称已被占用,则在其前面加上父级的名称。

字符串、数字和布尔值分别变为 string、number 和 boolean。null 在联合类型中写作 null,例如 number | null。值的数组变为一个类型后跟 [];空数组变为 unknown[],因为示例无法说明其中是什么。

key "first-name" -> property "first-name": string;   items -> Item[]

数组中的多个示例

对象列表按同一种形状读取。出现在每一项中的键为必需;只在部分项中出现的键写作带问号的可选字段。在不同项中类型不同的键会变为联合类型,顺序依次为 string、number、boolean、接口、数组,最后是 null。

示例只显示它包含的值。真实的 API 有时会省略某个键,单个示例中可能看不到它。若您需要类型把它显示为可选,请再加入一个不含该键的项。

示例:默认的 JSON 示例

默认示例是一个含五个键的对象。其 owner 键保存一个对象,因此代码中有 Owner 接口。其 items 键是含两个对象的数组,因此代码中有 Item 接口。sku 和 price 键在两项中都存在,因此为必需;discount 键在一项中为 null,在另一项中为数字,因此写作 number | null;note 键只出现在一项中,因此为可选。

结果有三个声明:Root、Owner 和 Item,声明数量显示为3。

常见问题

为什么字段会带有问号?

该字段在示例的至少一个对象中缺失。真实数据中它可能不存在,因此 TypeScript 把它视为可选,读取它的代码必须先检查。

为什么我的字段显示为 string | number 这样的联合类型?

不同的项中,该键保存的类型不同。类型列出了示例中见到的每一种类型,因此代码在使用该值之前,必须先判断它是哪一种。

工具会检查我真实的 API 数据吗?

不会。它只根据您粘贴的示例写出类型。只有一项的示例无法显示之后才出现的字段,因此可能的话请使用包含多项的典型响应。

为什么有些属性名要加引号?

first-name 或 2fa 这样不是普通标识符的名称,在 TypeScript 中必须加引号。可以作为标识符的名称则不加引号。

输出能用于 JavaScript 吗?

这些接口只属于 TypeScript。编译时它们会被移除,因此 JavaScript 项目需要用其他方式检查 JSON,或使用 TypeScript 的构建步骤。

资料来源

数据和文字最近核对于2026年11月10日星期二。

我们使用必要的 Cookie 来运行网站。经您同意后,Google 还会使用广告 Cookie 展示个性化广告。如果您拒绝,仍会看到广告,但广告不会个性化。