tigtools

JSON a TypeScript

Pega una respuesta o un archivo JSON y obtén declaraciones de TypeScript listas para usar en tu código.

Se ejecuta en tu navegador Sin registro

Declarar como

Cómo usarla

  1. Pega JSON en el cuadro de entrada, abre un archivo .json o prueba el ejemplo.
  2. Establece el nombre del tipo raíz, por ejemplo Order o ApiResponse.
  3. Elige entre declaraciones interface o type y si quieres añadir export y readonly.
  4. Copia el TypeScript generado o descárgalo como types.ts.

Cómo funciona

El generador recorre todo el documento JSON y registra los tipos de valor que encuentra en cada lugar. Cada objeto JSON se convierte en su propia declaración con nombre. El nombre proviene de la clave de la propiedad escrita en PascalCase, por lo que “shipping_address” se convierte en ShippingAddress. Los elementos de un array reciben el nombre del singular de la clave: “items” genera Item, “categories” genera Category, y las claves que no parecen plurales reciben el sufijo “Item”.

Todos los objetos dentro de un mismo array se combinan en una única interfaz. Si una clave aparece solo en algunos de ellos, se marca como opcional con “?”. Si un valor tiene distintos tipos en distintos lugares, el tipo es una unión como string | number. null se mantiene como su propio tipo, por lo que un campo que a veces es null se convierte en string | null. Un array vacío se convierte en unknown[], porque no hay nada de lo que inferir. Dos objetos con exactamente las mismas propiedades y tipos comparten una única interfaz en lugar de generar duplicados. Las claves que no son identificadores válidos, como “first-name”, se escriben entre comillas.

El resultado describe solo la muestra que pegues. Un campo que en la realidad es opcional o puede ser null aparecerá como obligatorio y no nulo si tu muestra no lo muestra, y las fechas llegarán como cadenas simples. Revisa los tipos con la documentación de tu API antes de confiar en ellos.

Ejemplos

Tipar una respuesta de API

Pega un pedido de la API de tu tienda con el nombre raíz Order. Obtendrás las interfaces Order, Customer, Item y Shipping, con note?: string en Item porque solo uno de los dos artículos tiene una nota.

Configuración de solo lectura

Pega un config.json, marca «Hacer las propiedades de solo lectura» y pega el resultado en config.d.ts para que el compilador detecte las escrituras accidentales en la configuración.

Array en el nivel superior

Un endpoint de lista devuelve [{…}, {…}]. Con el nombre raíz Product, la salida empieza con “export type Product = ProductItem[];” seguida de la interfaz ProductItem.

Preguntas frecuentes

¿Por qué un campo es opcional en el resultado?

Porque al menos un objeto del mismo array no tiene esa clave. Si todos los objetos la tienen, se marca como obligatoria. Pega varios registros para obtener campos opcionales más precisos.

¿Por qué una fecha se tipa como string?

JSON no tiene un tipo de fecha, así que las fechas viajan como cadenas. El generador no adivina formatos. Cambia el tipo manualmente si tu código las convierte en objetos Date.

¿Cuál es la diferencia entre interface y type?

Para estructuras de objetos funcionan casi igual. Las interfaces pueden extenderse y fusionarse con declaraciones posteriores; los alias de tipo no se pueden reabrir. Elige el estilo que ya utiliza tu base de código.

¿Puede generar validación en tiempo de ejecución, como esquemas Zod?

No. Solo produce declaraciones de TypeScript, que se verifican en tiempo de compilación y no validan datos en tiempo de ejecución.

Privacidad

Tu JSON se analiza solo en tu navegador. No se sube, se almacena ni se incluye en analíticas.