JSON a TypeScript
Tipos a partir de un JSON
JSON
Tipos generados
Pega un JSON para generar sus tipos.
Acerca de la herramienta
Esta herramienta convierte un ejemplo de JSON en tipos TypeScript listos para pegar en tu código. Sirve sobre todo para tipar la respuesta de una API que consumes, un archivo de configuración o datos de prueba, sin escribir cada interfaz a mano ni olvidar un campo anidado en el tercer nivel.
Cada objeto anidado recibe su propio tipo, con el nombre de su clave, y las estructuras idénticas comparten nombre. En un array de objetos, una clave que falta en algunos elementos pasa a ser opcional y los valores null se añaden al tipo. Eliges entre interface y type, el nombre del tipo raíz, si añadir export y readonly, y otra pestaña ofrece el esquema Zod equivalente.
Cómo usarla
- Pega tu JSON en el campo «JSON» o pulsa «Ejemplo» para probar.
- Rellena «Nombre del tipo raíz» y elige interface o type en «Declaración».
- Marca «Añadir export» o «Propiedades de solo lectura (readonly)» según tus convenciones.
- En «Tipos generados», cambia de la pestaña «TypeScript» a «Esquema Zod» si lo necesitas.
- Pulsa «Copiar» o «Descargar» para obtener el archivo types.ts o schema.ts.
Preguntas frecuentes
¿Cómo detecta la herramienta las propiedades opcionales?
Fusiona todos los objetos de un mismo array. Una clave que solo aparece en algunos elementos se marca como opcional con ?, o con .optional() en Zod. Una clave que a veces vale null recibe | null. Cuanto más representativo sea el ejemplo, más precisos serán los tipos.
¿Mi JSON se envía a un servidor?
No. El análisis y la generación de tipos se hacen en tu navegador. El JSON pegado no se envía ni se guarda; solo tus ajustes, como el nombre del tipo raíz o la elección entre interface y type, se recuerdan localmente en este navegador.
¿Qué pasa si mi JSON no es válido?
La herramienta muestra «JSON no válido» con la línea y la columna del error, y enseña la línea problemática con una marca bajo el carácter en cuestión. Corrígela en el campo y los tipos se actualizan automáticamente mientras escribes.
¿Cómo uso el esquema Zod generado?
Instala el paquete zod en tu proyecto y pega el código: cada objeto tiene su esquema, definido antes de usarse, y el tipo raíz se deduce con z.infer. Así puedes validar una respuesta de API en tiempo de ejecución con schema.parse().