Conversor JSON a TypeScript | Genera tipos a partir de una muestra

Pega una muestra de JSON y la herramienta recorre sus claves y valores para inferir definiciones interface o type de TypeScript. Los objetos anidados y los arrays se convierten en tipos con nombre propio, y puedes añadir readonly o volver opcionales todos los campos con un clic.

💡 Sobre esta herramienta

Cuando estás aprendiendo TypeScript, escribir tipos a mano para una respuesta de API es donde muchos se traban: ¿number o string?, ¿cómo se anota un array de objetos?, ¿qué pasa con un objeto dentro de otro objeto? Hacerlo manualmente para un JSON de 30 campos es lento y, sobre todo, no enseña el patrón; solo agota.

Esta herramienta te muestra el resultado para que aprendas observándolo. Pega un JSON representativo y se infiere su forma: las cadenas pasan a string, los números (enteros o decimales) a number, los booleanos a boolean, null queda como null y los arrays toman el tipo del elemento más []. Cada objeto anidado se extrae a su propia definición —una cadena user.address.geo se convierte en Root, Address y Geo— para que leas el modelo de arriba hacia abajo. Si la raíz es un array de objetos, obtienes un tipo RootItem y un alias type Root = RootItem[].

Cambia entre interface y type con el botón. Añade readonly para modelos inmutables o marca "todos los campos opcionales" para poner ? en cada propiedad cuando escribes un tipo parcial. La salida es un punto de partida limpio que copias directamente a tu editor y luego ajustas.

🧐 Preguntas Frecuentes

Q. ¿Cómo se tratan los objetos anidados? Cada uno se extrae a un tipo aparte con el nombre de su clave en mayúscula inicial. Un objeto profile dentro de user se vuelve una definición Profile independiente, y el tipo padre la referencia por nombre en lugar de incrustarla.

Q. ¿Cómo infiere el tipo de los arrays? Mira el primer elemento. [1, 2, 3] da number[]; un array de objetos genera un tipo AlgoItem envuelto como array. Un array vacío no se puede inferir, así que cae en unknown[].

Q. ¿interface o type, cuál elijo? Usa interface si necesitas extends o fusión de declaraciones; usa type si añadirás uniones, intersecciones o firmas de función. Para formas de objeto simples son intercambiables: elige lo que indique la guía de estilo de tu equipo.

Q. ¿Por qué todos los números son number? TypeScript no tiene tipo entero, así que 1 y 1.5 son ambos number. Las fechas y los IDs salen como string. Toma la salida como borrador y restríngela a Date o a tipos literales donde haga falta.

Q. ¿Y los campos que a veces son null? Si el valor de la muestra es null, obtienes el tipo null. En la práctica suele significar "cadena o null", así que tras generar, amplíalo a mano a una unión como string | null; una muestra solo puede mostrar una forma a la vez.

📚 Datos Curiosos

TypeScript usa tipado estructural, no nominal: dos tipos son compatibles si sus formas coinciden, sin importar el nombre. Por eso una interface Root generada encaja donde se espera el tipo real mientras los campos cuadren —cómodo, pero también significa que dos objetos con distinto significado y la misma forma son intercambiables sin aviso. El truco de la comunidad son los tipos "branded" como type UserId = string & { __brand: 'UserId' }, que añaden una propiedad fantasma para que un string cualquiera no se cuele. Los tipos sacados de una muestra son una línea de salida, no de meta: todavía hay que añadir seguridad ante null, uniones literales y conversiones a Date antes de que sean aptos para producción. Entenderlo es justo lo que separa "copiar tipos" de "modelar datos".