Conversor JSON a TypeScript — Genera Interfaces desde Respuestas API
Pega un JSON de ejemplo y obtén interfaces o type aliases de TypeScript con inferencia completa de objetos anidados y arrays. Sin registro, sin servidor — funciona completamente en tu navegador.
¿Por qué generar tipos desde JSON?
El poder de TypeScript viene de su sistema de tipos, pero escribir interfaces manualmente para respuestas API es tedioso y propenso a errores. Un solo typo en un nombre de campo crea un tipo que no coincide con la realidad.
Esta herramienta toma un JSON real — de tu API, una exportación de base de datos o documentación — y genera interfaces TypeScript precisas. Los objetos anidados se convierten en interfaces separadas con nombre. Los arrays obtienen tipos de elemento apropiados.
El código generado está listo para copiar a tu proyecto. Úsalo como punto de partida y después refina: marca campos opcionales, añade comentarios JSDoc o ajusta nombres de tipo.
Cómo Usar
- Pega un JSON de ejemplo en el área de entrada. Hay un ejemplo precargado para demo.
- Establece el nombre del tipo raíz (por defecto "Root"). Usa algo descriptivo como "UserResponse".
- Activa "Usar type en vez de interface" si prefieres type aliases.
- Activa "Marcar campos opcionales" para añadir ? a todas las propiedades.
- La salida TypeScript se actualiza al instante. Haz clic en Copiar para obtenerla.
Casos de Uso
Tipar respuestas API
Llama a tu endpoint, copia la respuesta JSON, pégala aquí. Obtienes una interface type-safe en segundos.
Arrancar un nuevo proyecto
¿Empezando un frontend que consume una API existente? Genera todos los tipos de respuesta antes de escribir un solo componente.
Migrar JavaScript a TypeScript
Tienes código JS funcionando con console.log mostrando estructuras de datos. Pega esas salidas para generar los tipos necesarios.
Documentación y code reviews
Genera interfaces desde ejemplos de la documentación API para verificar que tus tipos manuales coinciden con el contrato.
Consejos
Usa muestras representativas
Pega una respuesta que incluya todos los campos posibles. Para campos condicionales, combina varias respuestas o marca como opcional después.
Nombra el tipo raíz con sentido
No dejes "Root". Usa "UserProfile", "OrderListResponse", etc.
Revisa los tipos de array cuidadosamente
Si tu array tiene tipos mixtos, se genera un union. Esto puede indicar inconsistencias en tus datos.
Los tipos generados son un punto de partida
Añade JSDoc, marca campos opcionales reales y considera enums para valores como códigos de estado.
Ejemplos
Respuesta API simple
Objeto usuario plano con primitivos y array.
Input
{"id":1,"name":"Jane","email":"jane@example.com","roles":["admin","editor"]}Output
export interface User {
id: number;
name: string;
email: string;
roles: Array<string>;
}Objeto anidado
Respuesta con objeto profile anidado genera interface separada.
Input
{"id":1,"profile":{"bio":"Ingeniera","avatar":"https://example.com/img.jpg"}}Output
export interface User {
id: number;
profile: UserProfile;
}
export interface UserProfile {
bio: string;
avatar: string;
}Características
- Generación de tipos en tiempo real al editar JSON
- Objetos anidados se convierten en interfaces con nombre automáticamente
- Inferencia de tipos de elementos de array con soporte de unión
- Alternar entre interface y type alias
- Modo de campos opcionales para datos parciales/nulos
- Nombre de tipo raíz configurable
Preguntas Frecuentes
¿Maneja arrays de objetos?
Sí. Infiere el tipo de elemento desde el primer elemento y genera una interface con nombre.
¿Qué pasa con valores null?
Se tipan como "null". Para "string | null", necesitarás cambiarlo manualmente después de generar.
¿Puede generar desde JSON Schema?
Esta herramienta trabaja con muestras JSON (datos reales), no definiciones JSON Schema. Para eso, usa json-schema-to-typescript.
¿Se envían mis datos a algún servidor?
No. La conversión se ejecuta completamente en tu navegador. Seguro para respuestas API internas y datos propietarios.
Consejos y Flujos Relacionados
- ¿Necesitas limpiar JSON desordenado antes de convertir?Formateador JSON.
- ¿Quieres decodificar un JWT payload para tiparlo?Decodificador JWT.
- ¿Comparando tipos generados entre versiones de API?Comparador de Diferencias.