Conversor de JSON a tipos TypeScript

Pega un objeto JSON (o un array JSON) para generar automáticamente las interfaces/tipos de TypeScript correspondientes.

Generar tipos de TypeScript a partir de JSON

Lo primero que hace falta al consumir la respuesta de una API en TypeScript es una definición de tipos. Escribir un `interface` a mano mientras se entorna la vista sobre un JSON muy anidado resulta laborioso, y **es justo la clase de trabajo donde se olvida una propiedad o se confunde un tipo.** Pegue aquí el JSON y esta herramienta generará el `interface` o el `type` correspondiente.

El generador infiere los tipos de TypeScript a partir de los tipos que los valores tienen en JavaScript. **Los objetos anidados se extraen como interfaces aparte** y los arrays toman el tipo de sus elementos como `T[]`. Puede nombrar el tipo raíz libremente, de modo que la salida se pega directamente en su proyecto. **Como la inferencia descansa por entero en la muestra que pega, las propiedades que puedan omitirse y los campos que puedan ser nulos son cosas que ha de añadir después** con `?` o una unión. Todo se ejecuta en su navegador.

Cómo generar los tipos

  1. Pegue el JSON Introduzca una respuesta de ejemplo tal cual. Sirve tanto un objeto como un array.
  2. Nombre el tipo raíz Será el nombre del interface de nivel superior. El valor por omisión basta si no tiene preferencia.
  3. Revise la salida Los objetos anidados aparecen extraídos como interfaces aparte.
  4. Añada usted los campos opcionales **Lo que no aparece en la muestra no puede inferirse.** Añada `?` y `| null` donde corresponda.
  5. Cópielo a su proyecto El resultado se pega directamente en un archivo `.ts`.

Consejos para aprovecharla mejor

  • Si todos los elementos de un array son objetos, sus claves se combinan en una sola interface. Las claves que faltan en algunos elementos se marcan automáticamente como opcionales (`?`).
  • El nombre del tipo raíz es "Root" por defecto, pero puedes cambiarlo por el que prefieras (por ejemplo, `User` o `ApiResponse`). Los nombres de interface de los objetos anidados se generan automáticamente a partir del nombre de su propiedad.
  • Pega directamente un JSON de ejemplo de la respuesta de tu API para obtener rápidamente un borrador de los tipos que necesitas en tu código frontend.
  • El resultado generado es solo un borrador inferido a partir de la estructura. Se recomienda revisarlo manualmente contra la especificación real de la API (campos nullable, obligatorios, etc.) antes de usarlo.

Situaciones en las que resulta útil

Tipar una API externa

Aunque una API no publique definiciones de tipos, una respuesta de ejemplo le da un punto de partida.

Tipar un archivo de configuración JSON existente

Cuando quiera leer la configuración con seguridad de tipos, la estructura pasa directamente a un tipo.

Derivar tipos de datos simulados

Al construir primero la interfaz, puede producir tipos a partir de datos provisionales.

Revisar un tipo escrito a mano

Compare un tipo que escribió usted con el generado para encontrar lo que falta.

Términos de TypeScript explicados

interface
Una declaración que describe la forma de un objeto. **Declarar el mismo nombre más de una vez las fusiona automáticamente**, y eso lo distingue de un alias de tipo.
Alias de tipo
Una declaración que da nombre a cualquier tipo. Puede nombrar uniones y primitivos, cosa que un interface no permite.
Propiedad opcional
Un campo marcado con `?`, como `name?: string`. **No puede inferirse de una muestra pegada.**
Tipo unión
Un tipo como `string | null`, que expresa que un valor puede ser cualquiera de varios tipos.
Objeto anidado
Una estructura cuyo valor es a su vez un objeto. Esta herramienta lo extrae como interface aparte.
Inferencia de tipos
Derivar un tipo a partir de un valor. **La inferencia aquí descansa en la única muestra que pega, que no es forzosamente la especificación real de la API.**

Preguntas frecuentes

Escribir a mano las definiciones de tipos a partir de una respuesta de ejemplo de la API lleva tiempo y es propenso a errores, como escribir mal un nombre de clave o pasar por alto un tipo. Generarlas automáticamente ahorra mucho tiempo a los desarrolladores frontend y evita este tipo de descuidos.

Se combinan las claves de todos los elementos del array; las que solo aparecen en algunos elementos se marcan automáticamente como propiedades opcionales (`?`). Si una misma clave tiene tipos distintos según el elemento, se representa como un tipo unión (por ejemplo, `string | number`).

Las definiciones generadas se infieren mecánicamente a partir de la estructura del JSON de ejemplo. Información como si un campo admite null o si podrían añadirse nuevos campos en el futuro no se puede deducir solo del JSON de muestra, así que se recomienda contrastarlas con la documentación de la API y ajustarlas manualmente.

El nombre de la interface de un objeto anidado se genera automáticamente a partir del nombre de la propiedad que lo contiene (por ejemplo, un objeto bajo la clave `profile` se convierte en una interface llamada `Profile`). Si se necesita una interface con el mismo nombre pero distinta forma, se añade un número al final para diferenciarlas.
Tool-kun

A propósito — El problema del "desfase de tipos" que resuelven las herramientas de inferencia

TypeScript es un lenguaje que permite detectar errores en tiempo de compilación gracias al tipado estático, pero el compilador no tiene forma de conocer la forma de los datos JSON que llegan de una API externa a menos que un desarrollador la defina manualmente. Cada vez que la especificación de la API y la respuesta real difieren, o se añaden o eliminan campos, hay que actualizar las definiciones de tipos a mano; este desajuste entre "lo que dicen los tipos" y "lo que realmente devuelve la API" ha sido un quebradero de cabeza habitual en muchos proyectos frontend.

Una herramienta de conversión de JSON a TypeScript aborda esto deduciendo los tipos mecánicamente a partir de una respuesta JSON de ejemplo real, lo que agiliza enormemente este trabajo. Una herramienta muy conocida en este mismo terreno es quicktype, un proyecto de código abierto capaz de generar definiciones de tipos para varios lenguajes y reconocido por admitir múltiples formatos de entrada, incluidos JSON Schema y esquemas de GraphQL.

La dificultad de la inferencia de tipos radica en que el propio JSON no contiene información sobre si un campo está siempre presente o si podría volverse null en el futuro. Por eso las definiciones generadas automáticamente nunca son una solución completa: la práctica habitual es tratarlas como un borrador que solo refleja la estructura de esta muestra en concreto, y contrastarlas y ajustarlas con la especificación real de la API.