JSON转TypeScript

从JSON生成TypeScript接口

加载示例

根接口名称：

JSON输入

TypeScript输出

本地运行 · 粘贴密钥安全无忧

TypeScript接口将显示在这里…

本地运行 · 粘贴密钥安全无忧

TypeScript接口将显示在这里…

也可以试试：JSON格式化工具 JSON验证工具 JSON对比工具 JSON Pretty Print JSON压缩工具 JSON转YAML JSON转CSV JSON转C#类 JSON转Go结构体 JSON转Python Dataclass生成器 JSON转Java JSON转Dart

什么是JSON转TypeScript转换？

粘贴JSON数据，即可获得TypeScript接口——这些类型化契约精确描述了对象拥有哪些属性以及每个属性的类型。若没有接口，JSON.parse()返回的数据类型为any，在属性访问或赋值时既无编辑器提示，也无编译器检查。将JSON转换为TypeScript，无需手动编写接口即可获得这种类型安全保障。

TypeScript涵盖所有六种JSON值类型：string、number、boolean、null、object和array。每个嵌套的JSON对象都会生成独立的命名接口。数组类型从第一个元素推断。生成结果与JSON.parse()在运行时的实际返回值一致，因此接口反映的是真实数据，而非猜测。

对于大型或深度嵌套的JSON，手动编写接口既繁琐又容易出错。JSON转TypeScript生成器可自动读取结构、递归处理嵌套，并在几秒内输出整洁的接口代码。这在对接陌生API、使用模拟数据原型开发，或将JavaScript代码库迁移至TypeScript时尤为有用。它还能省去手动追踪嵌套属性名称和类型的工作，让你专注于业务逻辑，而非类型模板代码。

为什么使用JSON转TypeScript生成器？

手动生成TypeScript接口在对象较小时尚可，但面对嵌套结构或大型API响应时很快就会力不从心。设想一个拥有三层嵌套的50字段API响应——手动编写意味着数十个接口，每一个都可能存在拼写错误或遗漏可空字段的问题。自动生成器在毫秒内生成完整接口集，并降低代码与所消费数据之间发生类型不匹配的风险。除准确性外，它还能让类型与实际API契约保持同步。当服务更改响应结构时，只需粘贴更新后的JSON重新生成即可，远比在手写接口文件中逐一查找每个变动的属性快得多。

⚡

即时生成接口

粘贴任意JSON数据，在毫秒内获得正确类型化的接口。无需配置，无需构建步骤。

🔒

数据始终私密

所有转换均在你的浏览器中运行，JSON数据不会离开你的设备。处理生产数据或内部API响应时尤为重要。

📋

自动处理嵌套结构

嵌套对象生成独立的命名接口。数组、可空字段和混合类型均可自动解析，无需人工干预。

🌐

无需账号或安装

在任何现代浏览器中均可使用。无需安装npm包，无需配置CLI工具，无需填写注册表单。

JSON转TypeScript使用场景

前端API集成

粘贴REST或GraphQL的JSON响应，为React、Angular或Vue组件生成接口。类型安全的props和state可防止运行时意外。在monorepo中，还可在前后端之间共享生成的接口，确保双方对数据结构的一致理解。

后端响应类型化

调用第三方API的Node.js和Deno服务可从生成的接口中获益。只需定义一次契约，在编译期捕获结构不匹配问题。生成的接口同时也是轻量级文档，供服务调用方参考，减少维护独立schema文件或wiki页面的需求。

DevOps配置文件

AWS CDK、Pulumi等基础设施工具使用JSON配置。为这些配置生成TypeScript类型，可在部署前进行验证，在代码上线前捕获因拼写错误或错误值类型导致的配置错误。

QA测试夹具

从JSON测试夹具生成接口，确保断言与预期数据结构匹配。在测试运行前发现缺失或已重命名的字段。

数据管道契约

当管道产生JSON输出时，生成的接口作为下游消费者的schema。输出结构的变更会触发编译期错误。

学习TypeScript

TypeScript初学者可以粘贴熟悉的JSON结构，查看接口如何映射到数据，从而理解动态类型与静态类型之间的差异。

JSON到TypeScript类型映射参考

每种JSON值都映射到一种TypeScript类型。下表展示各JSON原始类型和结构类型的对应关系。该映射遵循ECMA-404 JSON标准和TypeScript内置类型。

JSON类型	示例值	TypeScript类型
string	"hello"	string
number	42, 3.14	number
boolean	true, false	boolean
null	null	null
object	{"key": "value"}	nested interface
array	[1, 2, 3]	number[] (inferred from first element)

TypeScript interface与type别名的区别

TypeScript提供两种描述对象结构的方式：interface声明和type别名。两者都能表示JSON结构，但在扩展和合并行为上有所不同。大多数JSON转TypeScript生成器输出interface，因为它是TypeScript中描述对象结构的惯用选择。

interface

支持声明合并和extends语法。适用于对象结构，尤其是公共API和库。可被其他接口扩展，也可与type进行交叉。

type

支持联合类型、交叉类型和映射类型。更适合计算类型、可辨识联合，或需要为原始类型起别名的场景。不能重新开放以进行声明合并。

代码示例

以下示例展示如何在不同语言和工具中从JSON生成TypeScript接口，每段代码均可直接运行。

TypeScript

// Manual interface definition from a JSON shape
const json = '{"id": 1, "name": "Alice", "active": true}';
const parsed = JSON.parse(json);

interface User {
  id: number;
  name: string;
  active: boolean;
}

const user: User = parsed;
console.log(user.name); // "Alice" — fully typed

JavaScript (json-to-ts library)

import JsonToTS from 'json-to-ts';

const json = {
  id: 1,
  name: "Alice",
  address: { street: "123 Main St", city: "Springfield" },
  tags: ["admin", "user"]
};

const interfaces = JsonToTS(json, { rootName: "User" });
console.log(interfaces.join("\n\n"));
// interface Address {
//   street: string;
//   city: string;
// }
//
// interface User {
//   id: number;
//   name: string;
//   address: Address;
//   tags: string[];
// }

Python (datamodel-code-generator)

# Install: pip install datamodel-code-generator
# Generate TypeScript-style types from JSON using Pydantic models

# Command line:
# datamodel-codegen --input data.json --output model.py

# Or generate TypeScript directly with quicktype:
# pip install quicktype
# quicktype --lang ts --src data.json --out types.ts

import json

data = {"id": 1, "name": "Alice", "scores": [98, 85, 92]}

# Python equivalent using TypedDict (Python 3.8+)
from typing import TypedDict, List

class User(TypedDict):
    id: int
    name: str
    scores: List[int]

user: User = data  # type-checked by mypy

CLI (quicktype)

# Install quicktype globally
npm install -g quicktype

# Generate TypeScript interfaces from a JSON file
quicktype --lang ts --src data.json --out types.ts

# From a JSON string via stdin
echo '{"id": 1, "name": "Alice"}' | quicktype --lang ts

# Output:
# export interface Root {
#   id:   number;
#   name: string;
# }

常见问题

JSON转TypeScript如何处理可选字段？

若JSON值为null，生成器会将该属性标记为可选，添加?后缀并赋予null类型。若需区分缺失键和null值，可在生成后手动调整输出，对缺失属性使用undefined。

可以将JSON数组转换为TypeScript吗？

可以。若根JSON为数组，生成器会检查第一个元素来推断元素类型，并为该元素输出接口，根类型则为该接口后跟[]。空数组因无元素可检查，会生成unknown[]。

深度嵌套的JSON对象如何处理？

每个嵌套对象都会生成独立的命名接口，接口名称由属性键转换为PascalCase形式。例如，属性"shipping_address"会生成名为ShippingAddress的接口。即使JSON有四五层嵌套，输出依然清晰可读。若多个嵌套对象具有相同结构，可手动将其合并为一个共享接口，以减少代码库中的重复定义。

json2ts和quicktype有什么区别？

json2ts是一个简单的转换器，直接将JSON值映射为TypeScript接口。quicktype更进一步，可分析多个JSON样本、对相似结构去重，并支持超过20种语言的输出。对于一次性转换，基于浏览器的工具更快；对于CI流水线或多语言代码生成，quicktype更合适。

为什么对JSON使用interface而不是type别名？

interface支持声明合并，意味着可在独立文件中扩展生成的接口，而无需修改原始文件。在大多数编辑器中，interface也能产生更清晰的错误信息。type别名在需要联合类型或映射类型时更合适，但对于简单的JSON对象结构，interface是标准选择。若你正在编写库或SDK，interface几乎总是正确的选择，因为下游使用者可以通过声明合并来扩展接口，而无需修改你的源码。

此工具能处理数组中类型不一致的JSON吗？

生成器从第一个非null元素推断数组元素类型。若数组包含混合类型——例如对象与字符串混合——输出仅反映第一个元素的结构。对于异构数组，需要在生成后手动定义联合数组类型，例如同时接受Item和string元素的类型，以准确表示所有可能的元素类型。

如何在实际项目中使用生成的接口？

将生成的接口复制到项目的.ts文件中，通常放在types/或models/目录下。在获取或处理JSON数据的地方导入它们。若需在运行时（而非仅在编译期）保证API响应与接口一致，可搭配Zod或io-ts等运行时校验库使用。使用Zod时，可直接通过其infer工具从schema推导TypeScript类型，消除接口定义与校验逻辑之间的重复。

生成的TypeScript接口能提供运行时类型安全吗？

不能——TypeScript的类型系统在编译时会被抹除。接口只存在于编辑器中和构建期间，不存在于运行时。无论之后赋予什么类型，JSON.parse()始终返回any。要在运行时强制类型检查，需将生成的接口与Zod或io-ts等库配合使用。这些库在使用数据前会验证传入对象是否实际符合预期结构，防止API响应格式错误、字段缺失和意外null值。