JSON a TypeScript
Convertir JSON a interfaces TypeScript y generar definiciones de tipos
Entrada JSON
Salida TypeScript
¿Qué es JSON a TypeScript?
Estás construyendo una app en React o Angular, tienes una respuesta de API en JSON delante de ti, y necesitas definir una interfaz TypeScript para ella. Escribirla a mano para una respuesta profundamente anidada es tedioso y propenso a errores — un tipo incorrecto y tu editor deja de detectar bugs. Esta herramienta infiere interfaces de TypeScript directamente desde tu estructura JSON, para que puedas pegar la respuesta y obtener definiciones de tipos listas en segundos.
Pega JSON, obtén TypeScript. La herramienta se ejecuta en tu navegador. No se envía nada a ningún servidor. La salida sigue la sintaxis estándar de TypeScript.
Cómo usar esta herramienta
Pegar JSON
Pega tu JSON en el editor izquierdo o sube un archivo. Usa Ejemplo para datos de ejemplo. El generador infiere tipos de la estructura. Usa datos representativos que muestren todos los campos que te interesan.
Revisar las interfaces
El panel derecho muestra las interfaces generadas. Los objetos anidados obtienen sus propias interfaces. Los arrays se tipan como Type[]. Los campos opcionales pueden usar ? según la implementación.
Copiar o descargar
Usa Copiar o Descargar para obtener el TypeScript. Pégalo en tu proyecto. Puede que necesites ajustar nombres, añadir genéricos o corregir campos opcionales. Para validar el JSON primero, usa el Validador JSON.
Dónde ayuda JSON a TypeScript
Al integrar APIs, a menudo necesitas tipos para el payload de respuesta. Pegar una respuesta de ejemplo aquí te da interfaces que puedes usar en tu proyecto Angular, React o Node. Archivos de configuración, payloads de webhooks y documentos de base de datos se benefician igual. Escribir interfaces manualmente para estructuras anidadas complejas es propenso a errores; esta herramienta infiere la estructura desde tu muestra. Para generación basada en esquema, usa el Generador de esquema JSON y herramientas como quicktype.
Ejemplos de JSON a TypeScript
Aquí un ejemplo de generación de interfaces TypeScript desde un objeto JSON.
Ejemplo: Registro de suscriptor
Entrada JSON:
Salida TypeScript generada:
Limitaciones
El generador infiere desde la muestra. Si un campo puede ser string | number pero tu muestra solo tiene strings, el tipo será string. Si los arrays pueden estar vacíos, el tipo de elemento puede ser unknown. Revisa y edita la salida. Para generación basada en esquema, usa el Generador de esquema JSON y una herramienta como quicktype.
Preguntas frecuentes
¿Cómo genero interfaces TypeScript desde JSON automáticamente?
Pega tu JSON en esta herramienta y genera interfaces TypeScript basadas en la estructura. Los objetos anidados obtienen sus propias interfaces, los arrays se tipan como Type[]. Copia la salida en tu proyecto Angular, React o Node.
¿Cuál es la diferencia entre interface y type de TypeScript para JSON?
Ambos funcionan bien. interface es preferido cuando necesitas extender o implementar; type es mejor para tipos union y tipos mapeados. Para la mayoría de formas de respuesta de API, cualquiera funciona — el generador produce interface por defecto.
¿Se envían mis datos a algún sitio?
No. Todo se ejecuta en tu navegador — tu JSON nunca sale de tu máquina. Seguro de usar con respuestas de API de producción.
¿Puedo generar tipos para otros lenguajes?
Esta herramienta solo genera TypeScript. El sitio tiene convertidores para C#, Java, Python, Go y otros.
¿Qué pasa con los campos opcionales y los enums?
El generador infiere tipos desde tu muestra. Los campos que podrían ser opcionales no se marcarán ? automáticamente — revisa la salida y añade ? donde sea necesario. Para enums, si un campo usa consistentemente valores string específicos, puedes reemplazar string con un tipo union como "activo" | "inactivo".
Herramientas relacionadas
Para TypeScript, ver typescriptlang.org y objetos TypeScript. Para JSON, ver json.org y MDN JSON. Para generación de esquema a código, ver quicktype. Para RFC 8259 (especificación JSON).