JSON a Interfaz TypeScript
Convierte cualquier objeto JSON en interfaces TypeScript limpias al instante. Herramienta online gratuita — soporta objetos anidados, arrays y campos...
Actualizado abril de 2026
Revisado por Rafael Duarte
// Paste JSON on the left // to generate TypeScript interfaces
Cómo funciona
De un JSON cualquiera a una interfaz lista para producción
1. Pega tu JSON
La respuesta de una API, un archivo de configuración o un registro de base de datos — cualquier objeto o array válido sirve.
2. Nombra la interfaz raíz
Por defecto es `RootObject` — cámbialo por algo de tu dominio, como `Usuario` o `Pedido`.
3. Copia el resultado
Haz clic en Copy o pulsa `Shift+Enter` y pega directamente en tus archivos `.ts`/`.tsx`.
Qué hace esta herramienta
Cubre la variedad completa de JSON que se ve en proyectos reales
Objetos anidados
Cada objeto interno recibe su propia interfaz con nombre, ordenadas para que las dependencias aparezcan antes de usarse.
Arrays tipados
Los primitivos se convierten en string[]/number[]; los arrays de objetos generan una interfaz más [].
Alterna entre interface y type
Cambia entre interface y type según la convención que sigas en tu proyecto.
Campos nulos
Los valores null se tipan correctamente, listos para que los amplíes con union types si hace falta.
Corrige JSON roto automáticamente
El botón Fix usa la librería jsonrepair para arreglar comas de más, comillas faltantes y llaves sin cerrar antes de generar las interfaces.
Acepta un array de objetos en la raíz
Pega un array — como una lista de usuarios devuelta por una API — y la herramienta genera la interfaz a partir del primer elemento, sin que tengas que extraer un objeto a mano.
Cómo se convierte cada tipo de JSON
Equivalencia directa entre valores JSON y tipos de TypeScript
Cuándo la vas a usar
Los escenarios más comunes entre quienes usan la herramienta
Tipar respuestas de una API REST
Pega el JSON que devuelve el backend y obtén interfaces listas para usar con fetch o axios.
Tipar archivos de configuración
Convierte un config.json en interfaz para tener autocompletado de las claves en el editor.
Acelerar el desarrollo
Evita escribir a mano interfaces para payloads complejos con decenas de campos anidados.
Integrar APIs de terceros
Pega una respuesta de ejemplo de la documentación para entender el formato y generar los tipos de partida.
Prototipar rápido antes de programar
Genera la estructura tipada en segundos para tener autocompletado en el editor antes de escribir la lógica de negocio.
Revisar el resultado con resaltado de sintaxis
El panel de salida colorea palabras clave, tipos primitivos, nombres de interfaz y campos por separado, lo que facilita revisar una interfaz grande antes de pegarla en el editor.
Errores comunes
Esperar campos opcionales automáticos
El generador tipa según los datos que le diste — los campos que a veces faltan necesitas marcarlos con ? manualmente después.
Dejar `null` como tipo final
En producción conviene ampliarlo a string | null según lo que ese campo realmente pueda recibir.
Arrays vacíos sin contexto
Se convierten en unknown[] — el tipo de los elementos no se puede inferir sin datos de ejemplo dentro del array.
Nombre de interfaz raíz con espacios o símbolos
A diferencia de las interfaces anidadas (que se convierten a PascalCase automáticamente), el nombre de la interfaz raíz se usa tal cual lo escribas — espacios o caracteres inválidos generan TypeScript que no compila.
Pegar un array de primitivos en la raíz
La raíz tiene que ser un objeto o un array de objetos. Un array solo de strings o números no tiene campos que tipar y devuelve un simple comentario de aviso, sin interfaz.
Esperar una tupla en vez de un union para arrays mixtos
Un array como ["a", 1, true] no se convierte en una tupla posicional — el generador crea un union (string | number | boolean)[], porque TypeScript no puede inferir posiciones fijas a partir de JSON suelto.
Por qué usar esta herramienta
Procesa estructuras anidadas de forma recursiva, generando una interfaz por cada nivel y ordenándolas para que las dependencias aparezcan antes de usarse, sin que tengas que organizar nada a mano.
Compatible con TypeScript 3.0+ y cualquier framework moderno — React, Next.js, Vue, Angular o Node.js.
Funciona 100% en el navegador: nada del JSON que pegas se envía a ningún servidor, así que puedes tipar payloads reales con datos sensibles sin preocuparte por la privacidad.
`interface` vs. `type`
Ambos disponibles desde el selector en la herramienta
Preguntas frecuentes
Pega el JSON — el generador procesa los objetos anidados de forma recursiva, cada uno con su propia interfaz nombrada, ordenadas para que las dependencias aparezcan primero.
Referencias
Artículo relacionado
DTO, entity e value object: qual é a diferença e quando usar cada um
Herramientas relacionadas
- Convertidor CSV ↔ JSON Desarrollador Convierte CSV a JSON o JSON a CSV al instante. Pega tus datos, elige la dirección y descarga el resultado. Gratis, privado y sin registro.
- Generador de Datos Mock JSON Desarrollador Genera datos JSON de prueba realistas para testing y prototipado — usuarios, productos, pedidos y schemas personalizados. Se ejecuta completamente en tu...
- Convertidor YAML ↔ JSON Desarrollador Convierte YAML a JSON o JSON a YAML al instante en tu navegador. Pega tu config o dato, elige la dirección y copia el resultado. Gratis, sin registro.
- Generador de Tabla ASCII y Markdown Desarrollador Generador de tablas ASCII gratuito — crea tablas de texto en estilo MySQL, Markdown, Unicode, redondeado, doble línea y reStructuredText. Pega CSV o escribe...
- Convertidor HTML a Markdown Desarrollador Convertidor HTML a Markdown gratuito con vista previa en vivo y fetch de URL. GitHub Flavored Markdown, encabezados y viñetas configurables. Sin registro.
