Resumen / Desarrollo y código / JSON a TypeScript
Desarrollo y código 100% en el navegador y sin conexión

JSON a TypeScript

Pega un JSON de ejemplo y obtén interfaces o tipos de TypeScript: los objetos anidados reciben nombre, las claves ausentes pasan a opcionales y los valores mixtos a uniones.

Pega o escribe tu entrada; el resultado aparece al instante y los errores se muestran debajo.

Tus archivos y datos nunca salen de tu navegador: no se sube nada.

JSON

TypeScript

Los tipos se deducen de los valores que pegas. Una clave que falta en algunos elementos de un array pasa a ser opcional, los valores mixtos forman una unión y un array vacío se convierte en unknown[]. Compara el resultado con tus datos reales antes de fiarte de él.

De una respuesta de ejemplo a tipos

Trabajar con una API suele empezar igual: tienes una respuesta JSON y necesitas un tipo para ella. Pega la respuesta a la izquierda y a la derecha aparece el TypeScript correspondiente, listo para un archivo .ts. No hay que escribir nada a mano y una carga con diez niveles tarda lo mismo que una con dos.

De la carga útil al archivo de declaraciones

  1. Pega tu JSON en el cuadro izquierdo o pulsa Ejemplo para ver cómo funciona.
  2. Indica el nombre del tipo principal, por ejemplo User o ApiResponse.
  3. Elige entre interface y type y marca export o solo lectura si los necesitas.
  4. Revisa el resultado a la derecha. Si hay un error de sintaxis, se muestra un aviso en lugar de los tipos.
  5. Usa Copiar o Descargar .ts para llevarte el código.

Cómo se deducen los tipos

  • Cadenas, números, booleanos y null se convierten en el tipo equivalente de TypeScript.
  • Un objeto anidado se convierte en su propia interfaz, con el nombre de su clave en PascalCase. La clave shipping_address da ShippingAddress.
  • En los arrays se fusionan todos los elementos. Una clave presente solo en algunos se marca como opcional con un signo de interrogación, y los valores de distinto tipo forman una unión como string | number.
  • Dos objetos con exactamente la misma forma comparten una interfaz en lugar de generar dos copias.
  • Un array vacío da unknown[] y un objeto vacío da Record<string, unknown>.

Los límites de adivinar con una muestra

Una muestra solo enseña lo que contiene. Un campo que siempre venía relleno en tu ejemplo puede ser null en producción, y un número que parece un identificador quizá sea una cadena en otro sitio. Las fechas llegan como cadenas y por eso se tipan como string. Considera el resultado un primer borrador y afínalo a mano, o valida las respuestas reales en tiempo de ejecución si los datos no dependen de ti.

Tus datos siguen siendo privados

La conversión se hace en la propia página. Las respuestas de producción, los tokens y los datos personales de una muestra pegada no se envían a ningún servidor, así que puedes usar datos reales.

Preguntas frecuentes (FAQ)

Pega el JSON en el cuadro izquierdo. La interfaz aparece enseguida a la derecha. Pon nombre al tipo principal, copia el código y guárdalo en un archivo .ts.