后端接口字段对齐
后端同事甩来一个嵌套 5 层的 JSON 响应体，里面驼峰、下划线混用，还有几个可选字段。手动写 TypeScript 类型定义，漏一个字段就得排查半天。把 JSON 粘贴进来，选 interface 风格，工具自动生成完整类型，可选字段标 ?，嵌套层级用 interface 引用，直接复制进项目就能用，省去逐层对字段的功夫。
开发者工具 · JSON / 数据格式
JSON 转 TypeScript
interface/type 双形式
✓本地处理 · 不上传
✓免费 · 无需登录
✓无次数限制
JSON 输入数据
TypeScript interface · 类型推断 · 嵌套
TypeScript 类型将在这里呈现 —— 点「示例」试试就绪 · 左侧粘贴 JSON，自动推断类型并生成 TypeScript，全程本地处理
第一节
关于本工具
About从后端 API 返回的 JSON 里抽出一个字段，手动写成 TypeScript 类型声明，改一次字段名就得同步改三处。这个工具把 JSON 样本贴进去，直接生成 interface 或 type 两种格式的类型定义，嵌套对象、数组、可选字段都按结构映射。纯浏览器运行，JSON 数据不上传服务器——本地粘贴、本地生成，适合前端开发者在 IDE 与工具之间快速对齐类型。
使用场景
API 文档类型生成
写 API 文档时，需要把接口返回示例转成 TypeScript 类型附在文档里。手动写一遍，接口改了又得同步改。用这个工具，把示例 JSON 贴进去，选 type 风格，生成的类型别名更紧凑，适合直接嵌入 Markdown 代码块。接口更新时，改 JSON 重新生成就行，文档和代码始终一致。
前端定义 mock 数据类型
后端接口还没写好，前端要先把页面搭起来。从需求文档里拿到 JSON 格式的 mock 数据，里面字段有字符串、数字、对象数组。手写类型定义，数组里的对象结构容易写错。把 mock JSON 贴进工具，自动生成完整类型定义，数组项结构自动展开，直接复制到 .d.ts 文件，mock 数据就能带上类型提示。
第三方 SDK 响应类型转换
接入一个第三方支付 SDK，文档只给了 JSON 格式的响应示例，没有 TypeScript 类型。手动翻译成类型定义，字段名里带 $ 符号，还有可选参数。把 JSON 贴进工具，选 interface 风格，工具自动处理特殊字符字段名，可选字段标 ?，嵌套对象拆成独立 interface，复制进项目就能用，不用逐字段对照文档。
配置类 JSON 转类型约束
项目里有个 JSON 配置文件，里面是各种主题色值、字体大小、间距值，结构固定但字段多。手动写类型定义，漏写一个字段，运行时取到 undefined 才报错。把配置 JSON 贴进工具，选 type 风格，生成字面量联合类型，字段值自动推断为具体数字或字符串类型。粘贴到代码里，编辑器直接提示可写字段和合法值，不会写错。
第二节
使用指南
Getting Started使用步骤
- 1在左侧编辑区粘贴或键入 JSON 字符串，右侧实时预览生成的 TypeScript 代码，无需额外操作
- 2点击顶部「interface」或「type」标签切换输出格式，预览区即时更新为对应声明形式
- 3点击代码块右上角「复制」按钮，将当前 TypeScript 代码复制到剪贴板，粘贴到项目文件即可使用
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| {"name": "Alice", "age": 30} | interface User { name: string; age: number; } | 常规：最简单的扁平 JSON，验证基本字段类型推断（字符串、数字） |
| {"id": 1, "active": true, "price": 19.99, "tags": null} | interface Item { id: number; active: boolean; price: number; tags: null; } | 常规：覆盖布尔、浮点数、null 类型，验证工具对 null 的处理（输出 null 而非 any） |
| {} | interface Root {} type Root = {}; | 边界：空对象，验证工具能正常输出空接口/类型（不崩溃或报错） |
| {"a": 1, "b": "hello", "c": true} | interface Data { a: number; b: string; c: boolean; } | 边界：字段名极短（单字符），验证字段名处理（不转义、不丢失） |
| {"nested": {"x": 10, "y": 20}} | interface Root { nested: Nested; } interface Nested { x: number; y: number; } | 边界：嵌套对象，验证工具是否自动生成嵌套接口，且命名规则（如 Nested）是否合理 |
| {"items": [1, 2, 3]} | interface Root { items: number[]; } | 易错：数组类型，验证工具正确推断为 number[] 而非 Array<number> 或 any[] |
| {"key": "value", "key": "duplicate"} | interface Root { key: string; } | 易错：重复键，验证工具是否去重（只保留最后一个值）或报错，用户需注意 JSON 规范 |
常见错误对照
1.JSON 末尾逗号导致解析失败
✗ 错误
{ "name": "Alice", "age": 30, }✓ 修复
{ "name": "Alice", "age": 30 }JSON 规范（RFC 8259）禁止末尾逗号，JavaScript 对象字面量允许但 JSON 不允许。工具解析 JSON 时严格遵循标准，多余逗号直接报错。
2.键名未用双引号包裹
✗ 错误
{ name: "Alice", age: 30 }✓ 修复
{ "name": "Alice", "age": 30 }JSON 要求键名必须用双引号，这是与 JavaScript 对象字面量的关键区别。未加引号会被视为语法错误，工具无法正确解析。
3.字符串值用了单引号
✗ 错误
{ "name": 'Alice', "age": 30 }✓ 修复
{ "name": "Alice", "age": 30 }JSON 字符串值必须用双引号，单引号仅在 JavaScript 中合法。工具按 JSON 标准解析，单引号字符串会触发解析异常。
4.数值写了前导零
✗ 错误
{ "age": 030 }✓ 修复
{ "age": 30 }JSON 数值不允许前导零（除非小数部分），030 会被解释为八进制或语法错误。TypeScript 类型推导时也会因歧义产生意外结果。
5.嵌套对象未正确闭合花括号
✗ 错误
{ "user": { "name": "Alice" }✓ 修复
{ "user": { "name": "Alice" } }花括号数量不匹配会导致 JSON 结构不完整，工具解析到文件结尾仍找不到闭合括号，直接报错。
6.布尔值或 null 写成字符串
✗ 错误
{ "active": "true", "data": "null" }✓ 修复
{ "active": true, "data": null }JSON 中 true、false、null 是字面值，不加引号。写成字符串后 TypeScript 会推导为 string 类型，丢失布尔或 null 语义。
7.数组元素间多写逗号
✗ 错误
[1, 2, , 4]✓ 修复
[1, 2, 4]JSON 数组不允许空洞（hole），多余逗号会被视为语法错误。TypeScript 推导时也无法处理 undefined 占位。
8.值中未转义控制字符
✗ 错误
{ "msg": "Hello
World" }✓ 修复
{ "msg": "Hello\nWorld" }JSON 字符串内换行符等控制字符必须转义为 \n、\t 等形式。直接写原始换行会破坏 JSON 结构，导致解析失败。
第三节
工作原理
How It Works核心公式
TypeScript 类型 = 对 JSON 值(value) 的递归类型映射
变量说明
valueJSON 原始值（字符串/数字/布尔/数组/对象/null）type映射后的 TypeScript 类型字符串
示例
输入 JSON：{"name":"张三","age":30,"hobbies":["读书","跑步"],"active":true}。工具递归处理：字符串 "张三" → string；数字 30 → number；布尔 true → boolean；数组 ["读书","跑步"] → string[]；对象整体 → interface 形式：{ name: string; age: number; hobbies: string[]; active: boolean; }。最终输出 interface 定义，同时可选生成 type 别名。
用户输入
本地处理
输出结果
第五节
常见问题
Q & A问我有一段 JSON，转出来的 TypeScript 类型里面全是 any，是不是工具有问题？＋
答
不是工具问题。当 JSON 中的字段值为空字符串、null 或空数组 [] 时，工具只能推断出 any，因为从这些值里读不出具体类型。解决方法是：在 JSON 里给这些字段补一个真实样本值，比如把 "" 改成 "example"，把 [] 改成 ["item"]，再重新转换。如果数据来自接口，可以找后端要一份带填充值的示例数据。
问interface 和 type 到底选哪个，有什么区别？＋
答
本工具同时提供 interface 和 type 两种输出格式，你可以直接切换看结果。核心区别在于：interface 可以被扩展（extends），适合定义对象的结构契约，在类或组件里更常用；type 可以组合（联合、交叉类型），适合处理复杂类型别名或联合类型。大多数场景选 interface 即可，如果你需要写类似 A | B 的联合类型，则必须用 type。
问为什么我的 JSON 里嵌套了好几层，转出来的类型嵌套特别深，看着很乱？＋
答
工具会保留 JSON 的原始嵌套结构，每个嵌套对象都会生成独立的类型定义。如果觉得层级太深，可以在源 JSON 里把一些深层对象提前提取成独立的字段，比如把 data.user.profile 改成 data.userProfile，这样转换后类型会扁平化。另外，输出结果中每个嵌套类型都有名称，可以直接引用，不需要把整个结构展开看。
问我 JSON 里有个字段叫 class 或者 import，转出来会不会报错？＋
答
不会报错，但 TypeScript 的保留关键字（如 class、import、delete）不能直接用作字段名。本工具会自动对这些字段名添加引号包裹，例如 'class': string，这样生成的代码在 TypeScript 中完全合法。如果你希望字段名更规范，可以在转换前手动修改 JSON 中的键名，避免使用关键字。
问这个工具能处理超大 JSON 文件吗？比如几万行的数据？＋
答
本工具完全在浏览器本地运行，不依赖服务器。处理能力完全取决于当前设备的性能和浏览器的内存限制。对于几万行的 JSON，如果浏览器页面不崩溃且粘贴操作流畅，就能正常转换。建议先在小数据量上测试，确认格式正确后再处理大文件。如果浏览器卡死，可以尝试分段转换，或者使用更专业的 CLI 工具。
问JSON 里某个字段的值既有字符串又有数字，转出来是什么类型？＋
答
工具会推断为联合类型，例如 string | number。如果 JSON 中同一个字段出现了多种数据类型，工具会列出所有出现的类型并用 | 连接。如果出现了预期之外的类型（比如字段有时是字符串有时是对象），建议检查源 JSON 是否数据结构不一致，这通常是数据质量问题，而不是工具转换错误。
问转出来的类型定义我复制到项目里，TypeScript 报错说找不到类型，怎么回事？＋
答
大概率是类型定义没有正确导出。本工具生成的代码默认是声明语句（declare），你需要根据项目结构手动加上 export 关键字，比如 export interface User { ... }。如果类型定义放在 .d.ts 文件中，不需要 export 也能全局可用；如果放在普通的 .ts 文件中，必须 export 才能在其它文件里 import 使用。
问我的 JSON 里数组元素是对象，但每个对象的字段不一样，怎么转？＋
答
工具会合并所有对象的字段，生成一个包含所有可能字段的类型。例如数组里有 {a:1} 和 {b:2}，转出来会是 { a?: number; b?: number }，所有字段变成可选的（?）。如果某些字段只在部分对象中出现，这是正确做法。如果希望类型更精确，可以要求后端统一数据格式，或者手动拆分成多个独立的数组。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。