跳到正文
SPCXTools

JSON 转 TypeScript

即时将 JSON 数据转换为 TypeScript 接口或类型,支持自定义根节点名称和 export 导出选项。

本地运行——文件不会离开你的设备

正在加载工具…

如何使用JSON 转 TypeScript

  1. 1将 JSON 对象或数组粘贴或输入到输入框中。您也可以点击“示例”查看运行效果。
  2. 2设置顶层对象的根节点名称(默认为 "Root")。
  3. 3选择生成 TypeScript 接口或类型别名,并可开启 export 导出关键字。
  4. 4将生成的 TypeScript 代码复制到剪贴板,或将其下载为 .ts 文件。

快速、保护隐私的 JSON 转 TypeScript 转换器

在 TypeScript 项目中处理外部 API、复杂的配置文件或文档数据库时,手动编写类型定义既繁琐又容易出错。这款免费的在线 JSON 转 TypeScript 转换器能将任何有效的 JSON 对象或数组瞬间转换为强类型的 TypeScript 定义。

由于该工具完全在您的浏览器中本地运行,数据绝不会上传到服务器。您可以安全地粘贴专有 API 响应、内部数据库转储或敏感的配置数据,完全不必担心数据隐私问题。转换会在您输入或粘贴时实时完成,助您快速迭代。

灵活地将 JSON 转换为 TypeScript 类型

每个代码库都有其独特的代码风格和规范。本工具提供多种配置选项,确保生成的代码完美契合您的项目需求:

自定义根节点名称: 默认情况下,最外层对象命名为 Root。您可以轻松将其修改为符合您业务模型的名称,例如 UserResponse、AppConfig 或 ProductList。

Interface 与 Type: 您可以选择将 JSON 生成为 TS 的 interface(接口)还是 type(类型别名)。在面向对象开发中,通常更推荐使用 Interface 来定义对象结构,因为它支持声明合并且易于扩展。而 Type 则非常灵活,常用于函数式编程。本工具支持一键在两者之间切换。

Export 关键字: 勾选 export 选项,即可在生成的类型前自动添加 export 关键字,方便您直接在应用的其他模块中引入和使用。

可选的 Null: 在许多 JSON API 中,缺失或未定义的值通常表示为 null。在严格的 TypeScript 环境下,您通常希望将这些字段标记为可选(使用 ?: 语法),而不是强制要求其类型为 null。勾选“Optional null”选项即可自动处理此模式,省去手动为大量字段添加问号的麻烦。

JSON 转类型推断的工作原理

输入 JSON 数据后,转换器会深度分析其中的值,推断出正确的 TypeScript 基础类型。字符串、数字和布尔值会直接映射为对应的 TypeScript 类型。嵌套对象会被递归处理为嵌套接口或内联对象类型,确保数据结构自上而下都保持严格的类型定义。

对于数组,工具会检查内部元素以确定最准确的类型。如果数组元素类型一致,会生成如 string[] 或 number[] 的简单数组类型;如果包含混合数据类型,则会智能生成联合类型,例如 (string | number)[]。如果数组完全为空,由于没有数据可供推断更具体的类型,将默认设为 any[]。

常见应用场景

调用 REST API: 在接入新接口时,通常会收到庞大且深度嵌套的 JSON 响应。将该响应粘贴到转换器中,即可立即生成 fetch 或 axios 请求所需的精确接口(interface)类型。这能在 IDE 中实现严格的类型检查和智能代码补全,从而避免因属性名拼写错误导致的运行时错误。

迁移 JavaScript 项目: 如果你正在将旧的 JavaScript 代码库逐步迁移到 TypeScript,可以使用现有的 JSON 配置文件或 Mock 数据快速生成数据模型,而无需从头手写。

使用 NoSQL 数据库: 像 MongoDB 这样的文档型数据库通常会返回复杂的 JSON 结构。为这些文档生成类型,可以确保你的应用逻辑安全地处理数据,并严格遵循数据库的 Schema。

获得最佳结果的技巧

  • 确保 JSON 格式完全合法: 与标准的 JavaScript 对象不同,JSON 要求所有键和字符串值都必须使用双引号,并且不允许出现末尾逗号。如果你有一段混乱的数据或 JavaScript 对象字面量,可以先使用 JSON 格式化工具 对其进行验证和清理。
  • 提供具有代表性的示例: 生成的类型准确度完全取决于你提供的数据。如果 API 的某个字段有时返回字符串,有时返回数字,请确保你的示例 JSON 在数组中同时包含这两种类型,或者在生成后手动将其调整为联合类型。示例数据越丰富,生成的 TypeScript 定义就越准确。
  • 从其他格式转换: 如果你的数据来自其他格式,可能需要先进行转换。例如,在生成 TypeScript 定义之前,你可以先使用 XML 转 JSON 或 YAML 转 JSON 工具来获取合法的 JSON 数据。

常见问题

转换器如何推断类型?
它会分析 JSON 数据中的实际值。字符串转换为 string,数字转换为 number,布尔值转换为 boolean,嵌套的对象或数组会被递归转换为嵌套的类型或接口。
如果 JSON 数组包含混合类型会怎样?
工具会生成联合类型(例如 (string | number)[]),以准确反映数组中存在的不同数据类型。
“Optional null”设置有什么作用?
启用后,任何值为 null 的 JSON 属性都会在 TypeScript 定义中被标记为可选属性。这对于处理以 null 表示缺失数据的稀疏 API 响应特别有用。
能否生成类型别名而不是接口?
可以。只需将样式设置切换为“type”,即可生成 type Root = { ... } 而不是 interface Root { ... }。
我的 JSON 数据会被发送到服务器吗?
不会。所有解析和转换都在浏览器本地完成。您的数据绝不会被上传,处理专有或敏感的 API 响应绝对安全。
为什么我的 JSON 会报错?
输入必须是严格合法的 JSON。常见问题包括键名缺少引号、末尾有多余逗号,或使用了单引号而非双引号。