UlvixorGenerador de Interfaces TypeScript desde JSON
Pega un JSON de ejemplo y obtén al instante las interfaces TypeScript correspondientes. Los objetos anidados se convierten en interfaces separadas, y si pegas un array de objetos, los campos que no aparecen en todos los elementos se marcan automáticamente como opcionales.
Cómo funciona
- Pega tu JSON en el panel de entrada (o usa el ejemplo incluido).
- La herramienta interpreta la estructura y genera una interfaz por cada objeto anidado, nombrada según la clave donde aparece.
- Si el JSON raíz (o un array dentro de él) contiene varios objetos, sus claves se combinan: un campo ausente en al menos un elemento se marca con '?' como opcional.
- Los arrays se representan como `Tipo[]`, y los valores mixtos como una unión de tipos.
- Copia el resultado con un clic.
Casos de uso
- Generar rápidamente los tipos de TypeScript para la respuesta de una API a partir de un ejemplo real.
- Crear la interfaz de un objeto de configuración sin escribirla campo por campo a mano.
- Detectar qué campos son opcionales en una colección de datos (por ejemplo, resultados de una API) comparando varios elementos a la vez.
- Aprender rápidamente cómo se vería en TypeScript una estructura JSON compleja.
Errores comunes
- Pegar un único objeto de ejemplo y esperar que la herramienta adivine qué campos son opcionales en el resto de tus datos.La herramienta solo puede inferir campos opcionales comparando varios elementos de un array. Si pegas un solo objeto, todos sus campos se marcan como obligatorios; pega un array con varios ejemplos representativos si necesitas detectar opcionalidad.
- Esperar que la herramienta valide reglas de negocio o genere tipos con validación (como Zod), no solo la forma de los datos.Esta herramienta solo describe la forma estructural del JSON de ejemplo que le diste (qué campos existen y de qué tipo son), no reglas de validación adicionales. Para eso, herramientas como Zod o io-ts requieren definir los esquemas manualmente.
- Pegar un JSON con valores 'null' esperando que se infiera un tipo más específico automáticamente.Un valor 'null' en el ejemplo se tipa como `null` literalmente. Si ese campo puede tener otros tipos en otros casos, edita la interfaz generada a mano para reflejar la unión completa (por ejemplo, `string | null`).
Preguntas frecuentes
No. La generación de interfaces ocurre completamente en tu navegador mediante JavaScript. Tu JSON nunca sale de tu equipo.
Solo aplica cuando pegas un array de objetos: la herramienta combina las claves de todos los elementos y marca como opcional (con '?') cualquier clave que no aparezca en absolutamente todos ellos.
Se muestra un mensaje de error indicando que el JSON no es válido, junto con el detalle que reporta el analizador, en lugar de generar una interfaz incorrecta.
Cada interfaz anidada toma el nombre de la clave donde aparece, convertido a PascalCase (por ejemplo, la clave 'address' genera una interfaz 'Address'). Si el nombre ya está en uso, se le agrega un número al final.
Alternativas
Extensiones de VS Code como 'Paste JSON as Code' hacen algo similar directamente en el editor, y herramientas más completas como quicktype generan tipos para varios lenguajes a la vez. Esta herramienta es útil para una conversión rápida sin instalar ninguna extensión, directamente desde el navegador.