¿Qué es JSON a TypeScript?

JSON to TypeScript convierte datos JSON en interfaces y definiciones de tipos TypeScript. Detecta cadenas, números, booleanos, arrays y objetos anidados, y marca los campos anulables como opcionales con tipos unión. Ahórrate escribir los tipos de las respuestas de API a mano.

Cuando un array contiene objetos con formas ligeramente distintas, el generador los fusiona: las claves que faltan en algunos registros pasan a opcionales con '?'. Cada objeto anidado obtiene su propia interfaz con nombre (User, UserAddress, UserAddressGeo). Los arrays mixtos producen tipos unión como (string | number)[]. Las cadenas con formato ISO 8601 se anotan con un comentario JSDoc, y los campos de cadena con un pequeño conjunto repetido de valores se infieren como uniones de literales en vez de string genérico. Además de la salida TypeScript, el mismo input genera tres pestañas más: un esquema Zod equivalente, datos de prueba con valores de ejemplo realistas, y un Esquema JSON draft-07. Alterna entre interfaz y alias de tipo, activa la palabra export, ordena las claves de A→Z y enciende camelCase para convertir claves snake_case o kebab-case en nombres idiomáticos de TypeScript.

Cómo usar

1. Paso 1 — Pega un objeto o array JSON, arrastra un archivo .json al cuadro de entrada, o trae JSON en vivo desde una URL. La herramienta analiza la estructura e infiere tipos TypeScript para cada campo.
2. Paso 2 — Personaliza la salida: establece el nombre de la interfaz raíz, elige entre interfaces y alias de tipo, y activa o desactiva las propiedades opcionales para los campos que puedan ser nulos.
3. Paso 3 — Copia la salida o descárgala. Cuatro pestañas comparten los mismos ajustes: tipos TypeScript, un esquema Zod equivalente para validación en tiempo de ejecución, datos de prueba listos para tests y Storybook, y un Esquema JSON draft-07 para OpenAPI o librerías de formularios. Todos los objetos anidados reciben automáticamente sus propias interfaces con nombre.

Cuándo usar

• Tipar una respuesta de API para la que no tienes spec OpenAPI/Swagger.
• Generar tipos rápidos para un archivo JSON de configuración (tsconfig.json, package.json) que lees desde un script.
• Montar en segundos una capa tipada sobre la respuesta de un SDK de terceros.

Resultado

Tu API devuelve un objeto de usuario con dirección y preferencias anidadas. Pega la respuesta JSON, establece el nombre raíz como «User» y obtén interfaces claras: User, UserAddress y UserPreferences, con tipos correctos como «string | null» para los campos opcionales.

Preguntas frecuentes

¿Cómo decide el generador qué campos son opcionales?

Si la entrada es un único objeto, con 'Marcar nullable como opcional' activado, los campos con valor null se marcan opcionales. Para arrays de objetos, el generador une las claves de todos los registros: cualquiera que falte en al menos un registro pasa a opcional.

¿Y los arrays donde los elementos tienen formas distintas?

Misma lógica: las claves comunes a todos los elementos siguen obligatorias, las que solo aparecen en algunos se vuelven opcionales y los valores con tipos primitivos mezclados generan uniones como string | number. El resultado es una interface que describe todo el array.

¿Mejor elegir interface o type alias?

Las interfaces se amplían fácil con declaration merging y son la opción típica para formas de API. Los type alias funcionan mejor si luego vas a combinar uniones, intersecciones o mapped types. En tiempo de ejecución dan lo mismo: usa el que use tu base de código.

¿Por qué algunas claves aparecen entre comillas en la salida?

Si una clave contiene caracteres que no valen como identificador de TypeScript (guiones, espacios, dígitos al inicio, puntos), el generador la envuelve en comillas. Así el tipo queda válido, y en el código accedes al campo como obj["weird-key"].

¿Los tipos generados detectan cambios si la respuesta de la API cambia?

Sí, si vuelves a generarlos. Los tipos describen una instantánea del JSON que pegas, no se actualizan solos. Un flujo habitual es regenerar al cambiar la versión de la API y revisar el diff en la revisión de código.

Herramientas relacionadas