JSON a TypeScript y Zod
Pega la respuesta de tu API y obtén interfaces TypeScript o un esquema Zod listo para validar en tiempo de ejecución.
export interface Root {
id: number;
username: string;
email: string;
website: string;
createdAt: string;
verified: boolean;
rating: number;
roles: string[];
profile: Profile;
orders: Order[];
stock: Record<string, StockItem>;
}
export interface Profile {
displayName: string;
avatar_url: null;
bio: string;
}
export interface Order {
id: string;
total: number;
items: number;
coupon?: string;
}
export interface StockItem {
qty: number;
}
Cómo se infieren los tipos y límites
- Un campo es opcional si falta en alguno de los objetos del mismo array o de las muestras.
- Los tipos se deducen solo de los datos: si un campo siempre vale null, el tipo será null. Añade más ejemplos para afinarlo.
- Un objeto se trata como diccionario cuando todas sus claves son números, UUID u ObjectId.
- El resultado se verifica compilando con tsc y validando con Zod 4 los ejemplos de prueba; la sintaxis de Zod 3 es la documentada oficialmente.
- Todo ocurre en tu navegador: el JSON no se envía a ningún servidor.
Hecho por
Miguel Ángel Colorado Marin (MACM)
Hecho por
Miguel Ángel Colorado Marin (MACM)
Full-Stack Developer · Guadalajara, España
Desarrollo aplicaciones web, herramientas digitales y proyectos completos — desde el diseño hasta el despliegue.
Escribir a mano los tipos de una respuesta de API es lento y propenso a errores, y un tipo de TypeScript no te protege si el servidor devuelve otra cosa en producción. Este generador resuelve las dos partes: crea las interfaces para tu editor y, si lo necesitas, el esquema Zod equivalente para validar los datos en tiempo de ejecución e inferir el tipo desde él. Analiza todos los elementos de cada array para saber qué campos son opcionales, detecta formatos como email o UUID y evita nombres repetidos. Cada salida se comprueba compilando con tsc y validando con Zod los ejemplos de prueba.
Características
- ✓Salida en interface o type de TypeScript y en esquemas Zod v4 o v3
- ✓Campos opcionales detectados al fusionar todos los objetos de un array
- ✓Uniones de tipos y null cuando un campo cambia de tipo entre ejemplos
- ✓Diccionarios con claves numéricas, UUID u ObjectId convertidos en Record
- ✓Validación Zod de email, URL, UUID, fecha y fecha-hora ISO detectados en los datos
- ✓Nombres en PascalCase desde snake_case o kebab-case, singulares en arrays y sin colisiones
- ✓Reutiliza tipos estructuralmente idénticos o genera uno por campo, tú eliges
- ✓Opciones de readonly, export, Array<T>, T | undefined, tipos en línea y objetos estrictos
¿Cómo convertir JSON a TypeScript?
- 1
Pega el JSON
Pega una respuesta de API o carga un archivo .json. Cuantos más ejemplos incluya, más precisos serán los opcionales.
- 2
Elige TypeScript o Zod
Selecciona la salida y el nombre del tipo raíz.
- 3
Ajusta el estilo
Decide entre interface o type, readonly, Array<T>, tipos en línea, versión de Zod, formatos u objetos estrictos.
- 4
Copia o descarga
Copia el código generado o descárgalo como archivo .ts para tu proyecto.
Preguntas frecuentes
¿Cómo decide qué campos son opcionales?
Recorre todos los objetos que ocupan la misma posición, por ejemplo cada elemento de un array. Si una clave falta en alguno, se marca como opcional. Con un único objeto no hay forma de saberlo, así que todos los campos serán obligatorios.
¿Por qué generar también un esquema Zod?
Porque los tipos de TypeScript desaparecen al compilar. Zod valida los datos reales en tiempo de ejecución y te da el tipo con z.infer, así el tipo y la validación nunca se desincronizan.
¿Qué diferencia hay entre la salida de Zod 3 y Zod 4?
Zod 4 usa validadores de primer nivel como z.email(), z.url() o z.iso.datetime() y z.strictObject(). Zod 3 usa z.string().email() y .strict(). Elige la que coincida con la versión instalada en tu proyecto.
¿Qué es la detección de diccionarios?
Si un objeto tiene como claves ids numéricos, UUID u ObjectId, lo normal es que sea un mapa con claves variables. En lugar de crear una propiedad por id, genera Record<string, T> con el tipo de los valores fusionado.
¿Puedo convertir varias muestras a la vez?
Sí. Pon las muestras dentro de un array y activa «El array raíz son muestras distintas». El tipo resultante combina todas y marca como opcionales los campos que no aparecen en todas.
¿Se envía mi JSON a un servidor?
No. La generación se hace en tu navegador, así que puedes usar respuestas reales con datos privados.
Herramientas relacionadas
Incrusta JSON a TypeScript y Zod en tu web
Integra JSON a TypeScript y Zod en cualquier página web con un simple iframe. Gratis, con atribución a miguelacm.es.
<iframe
src="https://miguelacm.es/embed/json-to-typescript"
width="100%"
height="700"
frameborder="0"
title="JSON a TypeScript y Zod — miguelacm.es"
></iframe>