Conversor de JSON a interfaces TypeScript + esquema Zod | We.Inc
Pega JSON y obtén interfaces de TypeScript y un esquema Zod a la vez. Los arrays se combinan para que los campos que faltan pasen a ser opcionales. Nada sale de tu navegador.
Pega cualquier muestra JSON y este conversor escribe interfaces de TypeScript para las comprobaciones en tiempo de compilación y un esquema Zod para validar los datos en tiempo de ejecución. Los objetos anidados reciben sus propios tipos con nombre, los arrays de objetos se combinan para que los campos ausentes en algunos elementos pasen a ser opcionales, y la conversión se hace en local, así que los datos privados se quedan en tu equipo.
Cómo se corresponden los valores JSON con los tipos
Valor JSON
TypeScript
Zod
"text"
z.string()
42 o 4.2
z.number()
z.boolean()
z.null()
number[]
z.array(z.number())
interface con a: number
z.object({ a: z.number() })
Clave ausente en algunos elementos del array
key?: type
.optional()
Los tipos solo son tan buenos como la muestra, así que pega una respuesta que incluya todos los campos que esperas, idealmente con varios elementos en cada array. Cambia el nombre del tipo raíz, alterna entre interface y type alias y copia cualquiera de las dos salidas.
¿Tipos o un esquema? Qué necesitas
Los tipos de TypeScript desaparecen al compilar tu código. Ayudan a tu editor y detectan errores en tu propio código, pero no pueden avisarte de que una API envió un string donde esperabas un número.
Un esquema Zod es código real que se ejecuta. Usar parse sobre los datos entrantes lanza un error que indica el campo incorrecto, y z.infer te da el tipo de TypeScript a partir del mismo esquema, así que ambos nunca se desincronizan. Para datos que vienen de fuera de tu app, el esquema es la opción más segura.
Cómo leer lo que dedujo el conversor
Un campo que era null en tu muestra pasa a ser del tipo null, porque la muestra no da ninguna otra pista. Cámbialo a string | null (o .nullable() en Zod) cuando sepas qué contiene, o marca la opción que hace opcionales los campos null.
Un array vacío pasa a ser unknown[] por la misma razón. Las fechas llegan en JSON como strings, así que siguen siendo strings; en Zod puedes ajustarlas a z.string().datetime() o similar cuando conozcas el formato.
Los nombres de los tipos salen de las claves: un array staff produce Staff y un objeto address produce Address. Si dos claves dieran el mismo nombre, se añade un número.
Pega JSON en el cuadro, o deja la muestra para ver cómo se comporta.
Define el nombre del tipo raíz. Cada objeto anidado recibe un nombre a partir de su clave.
Elige interface o type alias, y si las propiedades deben ser readonly.
Copia el TypeScript, el esquema Zod o ambos. Los errores del JSON se muestran con el mensaje del parser.
Pega dos o tres elementos en cada array para que se detecten los campos opcionales.
Elimina los valores sensibles antes de compartir los tipos generados; la herramienta en sí nunca sube nada.
Mantén los esquemas junto al código que obtiene los datos y valida en ese límite, no dentro de los componentes.
Usa safeParse en lugar de parse cuando quieras mostrar un mensaje amable en vez de lanzar un error.
Preguntas frecuentes
¿Debo usar una interface o un type alias?
Aquí ambos describen igual de bien la forma de los objetos. Las interfaces con el mismo nombre se fusionan, lo que ayuda al extender tipos de librerías; los type alias no se fusionan pero pueden nombrar uniones. Elige un estilo para el código base y mantenlo.
¿Cómo obtengo el tipo de TypeScript a partir de un esquema Zod?
Usa type User = z.infer<typeof UserSchema>. La salida Zod generada ya incluye esta línea bajo cada esquema, así que no necesitas mantener interfaces aparte.
¿Por qué un campo tiene el tipo null?
Tu muestra tenía null ahí, así que no había nada más que deducir. Sustitúyelo por el tipo real unido a null, por ejemplo string | null, o z.string().nullable() en el esquema.
¿Se envía mi JSON a un servidor?
No. El análisis y la generación se ejecutan en JavaScript en esta página. Puedes cargar la página, desconectarte y sigue funcionando.
Cómo usar la salida
Validar una respuesta con el esquema generado
safeParse devuelve éxito o una lista de problemas en lugar de lanzar un error, algo ideal para código de fetch que debe mostrar un estado de error.
La misma forma como interfaces simples
Útil para tipar props o argumentos de funciones cuando los datos ya son de confianza.
Pega JSON, obtén tipos
Pega una respuesta de ejemplo. El conversor escribe interfaces de TypeScript y un esquema Zod equivalente uno al lado del otro, combinando todos los elementos de cada array para que los campos ausentes en algunos salgan como opcionales.