JSON 转 TypeScript 类型生成器

JSON 转 TypeScript 类型生成器（JSON to TS）

把 JSON 数据一键转换为 TypeScript 接口/类型定义的网页工具。纯 HTML/CSS/JavaScript 单文件实现，零依赖、零后端，所有转换在浏览器本地完成，数据不出本机。

功能特性

• 类型推断：字符串 → string，数字 → number，布尔 → boolean，null → null，空数组 → unknown[]

• 数组处理：同类型元素生成 T[]；混合类型生成联合 (A | B)[]；对象数组自动合并所有元素字段为一个接口

• 可选字段：对象数组内并非每个元素都出现的字段自动标记为 field?

• 嵌套对象提取：嵌套对象提取为独立接口，命名为「父类型名 + 字段名」，根对象使用自定义根类型名

• 命名清洗：含特殊字符的键名自动加引号；嵌套接口名清洗为合法标识符

• 可配置：根类型名、interface / type 声明方式、分号或逗号分隔符、export 前缀开关

• 即时输出：输入 JSON 即实时生成，支持一键复制与下载 .ts 文件

命名规则

工作原理

JSON 文本 → JSON.parse 校验
  → 递归 build(value, name)
      原始类型 → string / number / boolean / null
      数组     → 元素类型去重合并；对象数组则合并字段为 <name>Item 接口
      对象     → 逐字段递归，注册为 <name> 接口，返回接口名
  → 接口去重并按「根在前」排序
  → 依选项渲染 interface / type 文本

使用场景

• 接口联调：拿到后端返回的 JSON 样例，快速生成前端类型定义

• 类型补全：为历史项目的裸 JSON 数据补上 TypeScript 类型

• 代码审查辅助：直观查看数据结构中的可选字段与联合类型

• 离线使用：无需安装任何依赖，浏览器打开即用

快速开始

无需安装与构建，直接用浏览器打开 index.html 即可使用，或在任意静态服务器下访问：

python3 -m http.server 8029
# 访问 http://localhost:8029/index.html

技术栈

• HTML5 + CSS3 + 原生 JavaScript（零第三方依赖）

• 递归类型推断：typeof / Array.isArray / Object.keys

• 剪贴板与 Blob 下载