快速、保护隐私的 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 数据。