JSON 转 TypeScript:转换差异、边界与常见坑
在线 JSON 转 TypeScript:生成 interface 并推断可选性,对联合类型、嵌套数组与需要手动收窄的字段明确标注,便于前端类型与后端接口对齐,减少联调返工。
生成 interface 的准确度取决于样本的代表性:全样本都出现的字段才会被标为必填,空数组推不出元素类型,字面量联合与可选属性都需要人工收口。它擅长省去体力活,不擅长替你做类型设计。
两种格式的差异对照
| 维度 | JSON | TypeScript 类型 |
|---|---|---|
| 类型强度 | 无类型,运行时才有值 | 编译期检查,IDE 可提示 |
| 字段可选性 | 字段可能不出现 | 用 ? 或 | undefined 显式表达 |
| 字面量联合 | 无此概念 | 可写 "a" | "b" 限定取值集合 |
| 数字与字符串 | 都是 number/string | 可细分为字面量、模板字符串类型 |
| 命名 | 无类型名 | 需要人工起语义化名字(工具只能给 Root/Item) |
| 可辨识联合 | 异构对象混在同一数组 | 用判别属性构建 discriminated union |
| 运行时校验 | 无 | 类型在编译后被擦除,运行时仍需校验 |
| 代码体积 | 数据本身 | 类型声明不产生运行时代码 |
边界条件
- 字段在全样本都出现才能标记为必填;只要有一个样本缺失就变成可选,接口契约会偏宽松。
- JSON 的 null 需要显式写成
| null,否则严格模式下赋值 null 会报错。 - 日期是字符串,类型系统无法区分"普通字符串"和"ISO 日期",需要手工用模板字符串类型加约束。
- 超过 2^53 的整数在 JS 里失真,类型写成 number 会掩盖问题,建议该字段改成 string。
常见坑
- 把生成结果当作接口契约直接提交,可选性偏宽松导致空指针跑到线上。
- interface 名全是 Root/Item,半年后没人知道哪个类型对应哪个接口。
- 大整数编号写成 number,前端解析即失真且类型检查不会报错。
- 依赖类型做运行时校验——类型在编译后消失,非法数据照样进来。
相关工具
- JSON 转 TypeScript从样例 JSON 自动推断生成 TypeScript 接口,处理嵌套对象、数组合并与可选字段,可自定义根接口名,适合给后端接口补类型。嵌套对象会拆成独立接口并按结构复用命名,混合类型数组合并为联合类型。可选字段会标注为可选,根接口名可自定义。生成类型可直接粘进项目。可选字段会标注为可选。
- 数据格式转换器在 JSON、YAML、TOML、XML、CSV 之间一处粘贴自由互转并实时预览。在 JSON、YAML、TOML、XML 与 CSV 之间任意互转,粘贴一次即可看多种输出。转换时会提示解析失败的位置,避免带着语法错误继续处理。适合在不同工具链之间迁移配置文件。支持粘贴即转。多种格式的输出可逐一取用。
- JSON 转 YAML把 JSON 转为缩进风格的 YAML,可自定义缩进宽度,适合改写成 K8s 清单与 GitHub Actions 工作流,让配置更易编辑对比。缩进宽度可调,多行字符串会自动改用块标量,避免出现大量转义符。输出适合直接粘进工作负载清单与流水线配置文件。注释式写法需自行补充。长文本会改用块标量输出。
- Excel 转 JSON 工具把 Excel 文件(xlsx、xls、csv)转为 JSON,支持嵌套表头、工作表选择与键名映射,用 SheetJS 在浏览器完成,适合业务数据导入。支持选择工作表、指定表头行与把首行映射为字段名。嵌套表头会按层级组装为嵌套对象,数字与日期保留原始类型。可指定表头行并自定义字段名。
常见问题
怎么把 TypeScript 再转回 JSON?
使用同工具的交换方向功能,或本站对应的「TypeScript 转 JSON」页面,两者都本地运行、数据不上传,可完成往返转换与校验。
JSON 和 TypeScript 哪个更适合人类阅读?
这取决于场景:TypeScript 通常更偏向程序解析与接口传输式的可读形态,而 JSON 更利于程序解析与接口传输式的程序消费;需要人工编辑时优先选可读性更高的那一侧。
为什么生成的 interface 名字都叫 Root?
因为 JSON 本身不携带类型名——顶层对象没有名字,工具只能用 Root、Item、Data 之类的占位名。要贴近业务语义,生成后手动重命名 interface(并用 IDE 的重命名重构一次性改全),或者先用 JSON Schema 给每层命名再生成。
嵌套数组会生成什么类型?
T[] 或 Array<T>,元素类型取数组第一个元素。空数组会退化成 any[] 或 never[],需要手工指定;元素异构时只反映第一个元素的形状,其余元素在类型检查里会报错。