# JSON 转 TypeScript

将 JSON 数据转换为 TypeScript interface 或 type，支持联合类型、可选字段与嵌套对象推断

> 标准页面: https://elysiatools.com/zh/tools/json-to-typescript

- **分类:** Development

- **关键词:** json, typescript, 转换, interface, 类型, 前端, json转typescript

## 概述

JSON 转 TypeScript 工具可以快速将 JSON 数据结构转换为强类型的 TypeScript 声明。它支持自定义根类型名称、选择 interface 或 type 导出风格，并能自动推断嵌套对象和数组类型，帮助前端开发者快速构建类型安全的 API 响应和数据模型。

## 输入项

- **JSON 输入** (textarea): { "name": "Alice", "age": 30, "roles": \["admin", "user"\], "address": { "city": "Shanghai", "zip": "200000" } }
- **根类型名称** (text): Root
- **导出风格** (select)
- **可选字段** (checkbox)

## 适用场景

- 在对接后端 API 接口时，需要根据返回的 JSON 响应快速生成对应的 TypeScript 类型定义。
- 在重构遗留 JavaScript 项目时，需要将现有的 JSON 配置文件或 mock 数据转换为 TypeScript 声明。
- 在编写前端组件或状态管理逻辑时，需要为复杂的嵌套 JSON 数据结构定义清晰的类型约束。

## 工作原理

- 在输入框中粘贴或输入需要转换的 JSON 数据。
- 设置根类型名称，并选择导出风格为 interface 或 type，同时可根据需要勾选是否将所有字段设为可选。
- 工具自动解析 JSON 结构，推断数据类型（如字符串、数字、数组及嵌套对象），并即时生成对应的 TypeScript 代码。

## 使用案例

- 快速生成 API 响应的 TypeScript 接口定义，提升前端开发效率。
- 将 Mock 数据转换为类型声明，确保测试数据与业务代码类型一致。
- 转换复杂的 JSON 配置文件，为项目配置提供静态类型检查和自动补全。

## 常见问题

### 这个工具支持嵌套的 JSON 对象吗？

支持。工具会自动递归解析嵌套的子对象，并为其生成独立的子类型或内联类型定义。

### 什么是“可选字段”选项？

勾选该选项后，生成的 TypeScript 类型中所有属性都会带上问号（?），表示这些字段在数据中是可选的。

### 导出的 interface 和 type 有什么区别？

interface 主要用于定义对象结构，支持继承和合并；type 则是类型别名，适用于定义联合类型或更复杂的类型组合。

### 如果 JSON 数据格式不正确会怎样？

输入的 JSON 必须符合标准的 JSON 语法规范，如果存在格式错误，工具会提示解析失败，请确保双引号和逗号正确。

### 数组中的混合类型会如何处理？

工具会分析数组中的所有元素，并自动推断为联合类型（例如 string | number）或对象数组。

## 相关工具

- [Data URI 生成器](https://elysiatools.com/zh/tools/data-uri-generator): 将文件转换为 Data URI（Base64 或百分号编码），用于直接在 HTML、CSS 或 Markdown 中内联图片、字体等资源
- [JSON Schema 转 Zod Schema 转换器](https://elysiatools.com/zh/tools/json-schema-to-zod-schema-converter): 将标准 JSON Schema 的 JSON/YAML 定义转换为可直接在 TypeScript 项目中使用的 Zod 运行时校验代码，支持嵌套结构、数组、枚举和常见校验规则
- [JSON 转 C# 类](https://elysiatools.com/zh/tools/json-to-csharp): 将 JSON 数据转换为 C# class，包含 PascalCase 属性、JsonPropertyName 特性与嵌套类型推断
- [JSON 转 Go Struct](https://elysiatools.com/zh/tools/json-to-go): 将 JSON 数据转换为 Go struct 定义，包含 json 标签、导出的 PascalCase 字段和嵌套类型推断
- [JSON 转 Java 类](https://elysiatools.com/zh/tools/json-to-java): 将 JSON 数据转换为 Java class，含 Jackson @JsonProperty 注解、私有字段及 getter/setter
- [JSON 转 Kotlin Data Class](https://elysiatools.com/zh/tools/json-to-kotlin): 将 JSON 数据转换为 Kotlin data class，含 @SerializedName 注解、可空处理与嵌套类型推断
- [JSON 转 Rust Struct](https://elysiatools.com/zh/tools/json-to-rust): 将 JSON 数据转换为 Rust struct，含 serde Serialize/Deserialize 派生、snake_case 字段与 serde rename 属性
- [日志转时序图转换器](https://elysiatools.com/zh/tools/log-sequence-diagram-converter): 把结构化服务日志转换成 Mermaid 或 PlantUML 时序图，并可叠加延迟和错误标注

## 示例

- [Terraform Plan JSON 样本](https://elysiatools.com/zh/samples/terraform-plan-json-samples): 用于依赖可视化和变更审查的 Terraform plan JSON 文件样本，贴近 terraform show -json 输出结构
- [Web TypeScript 数据序列化示例](https://elysiatools.com/zh/samples/web-serialization-typescript): Web TypeScript 数据序列化示例，包括JSON序列化/反序列化和XML解析
- [聊天记录 JSON 示例](https://elysiatools.com/zh/samples/chat-transcript-json): 多角色聊天记录的 JSON 示例
- [JSON 示例](https://elysiatools.com/zh/samples/json): JSON（JavaScript 对象表示法）格式示例，从简单到复杂结构

## 相关内容

- [JSON 到强类型代码生成器](https://elysiatools.com/zh/hubs/json-to-typed-code-generators): 从 JSON 或 schema 证据生成 TypeScript、Go、Rust、Kotlin、Java、C# 与 Zod 校验模型。