JSON 转 TypeScript
TypeScript 输出
export interface Root {
id: number;
name: string;
active: boolean;
tags: string[];
profile: Profile;
}
export interface Profile {
age: number;
city: string;
}输出方式
相关外部工具
部分链接为联盟营销链接。
相关工具
一步将 JSON 转为 TypeScript 类型。粘贴 API 响应或任意 JSON 对象,即可立即获得整洁的 interface 或 type alias,嵌套对象、数组和可选字段均自动处理。完全在浏览器中运行,不上传任何数据。
使用方法
- 将 JSON 粘贴到输入框中。
- 设置根类型名称,选择 interface 或 type,以及 null 的处理方式。
- 将生成的 TypeScript 复制到您的项目中。
类型推断原理
每个对象生成独立的 interface,嵌套对象拥有各自命名的 interface。对象数组会合并为单一形状,部分条目中缺失的键会变为可选。null 值默认转为可空类型,也可选择转为可选属性。
功能特点
嵌套对象
深层嵌套的 JSON 会被拆分为相互引用的清晰独立 interface。
数组形状合并
对象数组合并为一个类型,条目间差异字段变为可选。
可选与可空字段
可选择 null 值生成可空类型还是可选属性。
interface 还是 type
根据代码库风格选择输出命名 interface 或 type alias。
自定义根名称
可为顶级类型命名为 User 或 ApiResponse 等任意名称。
常见用途
为 API 响应定义类型
粘贴示例响应,获取可在整个应用中使用的类型。
从 Mock 数据生成类型
从示例数据生成类型,让代码保持类型安全。
配置与数据文件
几秒内为 JSON 配置或内容文件创建类型。
学习 TypeScript
了解实际 JSON 如何映射为 TypeScript interface 和联合类型。
注意事项
- 类型从您粘贴的示例中推断,请确保包含所有需要的字段。
- 空数组因无法推断元素类型,会生成 unknown[]。
- 在生产环境使用前,请仔细检查联合类型和可选字段。
- 所有操作在您的设备上完成,不会发送到服务器。
常见问题
- 支持嵌套对象吗?
- 支持。每个嵌套对象生成独立的命名 interface,父级通过名称引用。
- 数组如何定义类型?
- 对象数组合并为单一 interface,部分条目中缺失的键变为可选。混合原始值数组生成联合类型,如 (string | number)[]。
- null 值如何处理?
- 默认情况下,null 生成可空类型,也可切换为将 null 视为可选属性。
- 应该用 interface 还是 type?
- 两者均可,根据代码库风格选择。interface 常用于对象形状,type alias 更灵活,适合联合类型。
- 我的 JSON 会被上传吗?
- 不会。生成器完全在浏览器中运行,不会发送到服务器,也无需注册账号。