JSON a TypeScript
Convierta objetos JSON en interfaces y tipos de TypeScript
Entrada y opciones
Ajustes rápidos y ejemplos
Se ejecuta en su navegador. Sus datos permanecen en este dispositivo.
Resultados
Ingrese sus valores para ver el resultado.
Conversor gratuito de JSON a TypeScript en línea
Este conversor de JSON a TypeScript transforma datos JSON sin procesar en interfaces o alias de tipo de TypeScript correctamente tipados en segundos. Pegue cualquier objeto o arreglo JSON, haga clic en «Convertir» y reciba definiciones de TypeScript limpias y listas para producción que puede incorporar directamente a su código. La herramienta maneja automáticamente objetos anidados, arreglos con tipos mixtos, valores nulos y estructuras profundamente recursivas.
Las opciones personalizables le dan control total sobre el resultado. Alterne entre la sintaxis de interface y de alias de tipo, marque todas las propiedades como opcionales, aplique el modificador readonly, añada palabras clave export y defina un nombre personalizado para la interfaz raíz. Las interfaces anidadas se nombran automáticamente según las claves padre y se singularizan de forma inteligente, lo que genera nombres de tipo legibles como «Project» a partir de un arreglo «projects».
Tanto si consume una API REST, migra un proyecto de JavaScript a TypeScript o documenta la forma de los datos para su equipo, esta herramienta de JSON a TypeScript elimina la tediosa tarea de escribir los tipos a mano. Todo se ejecuta en su navegador: sus datos JSON nunca se suben a ningún servidor, por lo que puede usarla con respuestas de API propietarias y cargas útiles sensibles.
Características principales
- Generación recursiva de interfaces para objetos JSON profundamente anidados
- Detección inteligente del tipo de arreglo con compatibilidad automática con tipos unión para arreglos de tipos mixtos
- Alterne entre la sintaxis de interface y de alias de tipo
- Modificador de propiedades opcionales para definiciones de tipo flexibles
- Modificador readonly para crear contratos de tipo inmutables
- Palabra clave export configurable para interfaces listas para módulos
- Nombre personalizado para la interfaz raíz
- Nombres inteligentes para interfaces anidadas con singularización (por ejemplo, «projects» se convierte en «Project»)
- Copia con un clic del código TypeScript generado al portapapeles
- JSON de ejemplo precargado con objetos anidados, arreglos y valores nulos para pruebas rápidas
Cómo usar el conversor de JSON a TypeScript
- Configure las opciones: Defina el nombre de la interfaz raíz y active o desactive las preferencias de interface frente a type, propiedades opcionales, readonly y palabras clave export.
- Pegue su JSON: Ingrese o pegue un objeto o arreglo JSON en el panel de entrada de la izquierda. Haga clic en «JSON de ejemplo» para cargar una carga útil de demostración.
- Haga clic en Convertir: Pulse «Convertir a TypeScript» para generar el resultado tipado en el panel de la derecha.
- Revise el resultado: Inspeccione las interfaces generadas. Los tipos anidados aparecen encima de la interfaz raíz para ordenar claramente las dependencias.
- Copie a su proyecto: Haga clic en «Copiar» para dejar el código TypeScript en su portapapeles y péguelo en su archivo .ts o .d.ts.
Casos de uso
- Consumo de API REST: Pegue una respuesta de API para generar interfaces de TypeScript que mantengan su frontend con tipado seguro.
- Migración de JavaScript a TypeScript: Convierta fixtures JSON y datos de prueba en definiciones tipadas como parte de un proyecto de migración.
- Creación de DTO en el backend: Genere tipos de Data Transfer Object a partir de ejemplos de solicitud o respuesta para backends en Node.js.
- Documentación de API: Incluya las interfaces generadas en la documentación de la API para que los consumidores conozcan la forma exacta de los datos de solicitud y respuesta.
- Mapeo de tipos de GraphQL: Use los tipos generados como punto de partida para las definiciones de tipos de los resolvers de GraphQL.
- Pruebas y mocks: Cree fábricas de datos de prueba tipados a partir de respuestas reales de la API para pruebas unitarias y de integración.
- Aprender TypeScript: Los estudiantes pueden ver cómo los valores JSON se asignan a tipos de TypeScript y así desarrollar intuición sobre el sistema de tipos.
Preguntas frecuentes
¿Esta herramienta es gratuita?
Sí, el conversor de JSON a TypeScript es totalmente gratuito, sin registro ni límites de uso. Convierta tantas cargas útiles JSON como necesite.
¿Mis datos están seguros?
Sí. Toda la conversión se realiza localmente en su navegador. Sus datos JSON nunca se envían a ningún servidor, así que puede convertir con seguridad respuestas de API propietarias y estructuras de datos internas.
¿Cuál es la diferencia entre interface y alias de tipo?
En TypeScript, tanto interface como los alias de tipo pueden describir la forma de un objeto. Las interfaces admiten la fusión de declaraciones y en general se prefieren para los contratos de API públicas. Los alias de tipo son más flexibles y pueden representar uniones, intersecciones y tipos primitivos. Elija el que se ajuste a las convenciones de su proyecto.
¿Maneja arreglos con tipos mixtos?
Sí. Si un arreglo contiene elementos de tipos distintos (por ejemplo, cadenas y objetos), el conversor genera un tipo unión como (string | MyObject)[]. Las formas de objeto de todos los elementos se combinan en una única interfaz completa.
¿Puedo convertir arreglos JSON en el nivel raíz?
Sí. Si su JSON raíz es un arreglo de objetos, el conversor crea una interfaz para el elemento del arreglo y un alias de tipo para el arreglo raíz. Si el arreglo contiene solo primitivos, genera un alias de tipo sencillo como «type RootObject = string[]».
Consejos y buenas prácticas
- Use un ejemplo de JSON representativo: Incluya todos los campos posibles en su ejemplo para que la interfaz generada recoja la forma completa de los datos.
- Defina un nombre raíz significativo: Cambie «RootObject» por algo descriptivo como «UserResponse» o «ProductData» para que el código sea más legible.
- Active opcional para datos parciales: Si su API devuelve campos distintos según el contexto, marque las propiedades como opcionales para evitar errores de compilación.
- Use readonly para el estado inmutable: Cuando los tipos generados representen un estado que no debe mutarse (por ejemplo, los slices del store de Redux), active el modificador readonly.
- Revise los nombres anidados: Compruebe que los nombres de las interfaces anidadas generadas automáticamente tengan sentido. Renómbrelos en su código si la singularización produce resultados extraños.
- Combínelo con JSON Schema: Para una validación completa, genere un JSON Schema junto con los tipos de TypeScript y valide los datos tanto en tiempo de ejecución como en tiempo de compilación.