DT Dev Tools

JSON a TypeScript

Infiere interfaces de TypeScript a partir de un ejemplo JSON de forma local. Este generador gratuito recorre objetos anidados, arrays y uniones sin subir tus datos.

🔒 Se ejecuta completamente en tu navegador — nada se carga

Advertisement

Qué hace JSON a TypeScript

JSON a TypeScript lee un ejemplo JSON e infiere interfaces de TypeScript fuertemente tipadas que describen su estructura. Recorre el valor de forma recursiva: los objetos se convierten en interfaces con nombre, los valores primitivos pasan a ser los tipos correspondientes string, number, boolean o null, y los arrays se convierten en tipos de elemento entre corchetes. Cuando un array contiene elementos de tipos distintos, el generador los fusiona en una unión para que el resultado siga siendo compatible con los datos originales. Resulta útil al consumir una API sin tipos publicados, al añadir seguridad de tipos a una carga heredada o al convertir un fixture rápido en un modelo reutilizable.

Los arrays de objetos se tratan con cuidado. En lugar de tipar solo el primer elemento, la herramienta fusiona todos los objetos del array en una única interfaz, reuniendo la unión de claves. Las claves que faltan en algunos elementos se marcan como opcionales con un signo de interrogación final, lo que refleja cómo las respuestas reales incluyen campos solo cuando tienen valor. Los objetos anidados se promueven a sus propias interfaces con nombre derivado de la propiedad, de modo que el resultado parece escrito a mano y no un único tipo profundamente incrustado.

Flujo de trabajo privado en el navegador

Todo el análisis y la inferencia ocurren dentro de tu navegador con JavaScript del lado del cliente. La herramienta no sube a ningún servidor tu JSON, respuestas de API, identificadores, tokens ni ejemplos con forma de datos de clientes, y no requiere una cuenta. Este modelo solo local es importante porque los datos que se pegan en un generador de tipos suelen ser una respuesta real de producción capturada al depurar. Mantener el trabajo en tu equipo reduce riesgos y hace que el resultado sea instantáneo, porque no hay viaje por la red entre pegar y obtener la salida.

La interfaz mantiene cerca la entrada JSON, el nombre raíz y las interfaces generadas para que puedas verificar la inferencia antes de copiarla. Aun así, conviene revisar los resultados antes de incorporarlos al código: un único ejemplo no puede revelar todos los campos opcionales, valores anulables o enums que la API real puede devolver, así que amplía los tipos cuando tu conocimiento del dominio indique que un campo puede faltar o adoptar más formas de las que muestra el ejemplo.

Consejos prácticos

Proporciona el ejemplo más completo que tengas, idealmente con los campos opcionales rellenados y un array con más de un elemento, para que la lógica de fusión detecte uniones y opcionalidad. Cambia el nombre de la interfaz raíz para que coincida con tu modelo de dominio antes de generar. Después de copiar, considera ajustar los tipos inferidos de forma demasiado amplia: sustituye los campos string genéricos por uniones de literales en enums conocidos, marca los identificadores como tipos con marca si tu código los usa y confirma que cualquier campo que el inferidor haya tipado como null deba ser en realidad una unión anulable. La inferencia en el navegador es excelente para un primer borrador rápido, pero los tipos finales deben reflejar el contrato del que tu aplicación depende realmente.

Cómo usar

  1. Pega el JSONAñade un ejemplo representativo de objeto o array JSON.
  2. Nombra la raízElige un nombre para la interfaz raíz y genera las interfaces.
  3. Copia las interfacesRevisa el TypeScript inferido y cópialo o descárgalo.

Preguntas frecuentes

¿Admite objetos y arrays anidados?
Sí. El inferidor recorre de forma recursiva objetos y arrays anidados y da nombre a las interfaces hijas a partir de las claves de sus propiedades.
¿Cómo se tratan los arrays con elementos mixtos?
Los tipos de los elementos se fusionan en una unión y, en los arrays de objetos, se combinan todas las claves, de modo que los campos opcionales se marcan con un signo de interrogación.
¿Se sube mi JSON?
No. La inferencia se ejecuta por completo en tu navegador con JavaScript del lado del cliente.
Advertisement