Conversor de JSON a tipos TypeScript

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

Consejos de uso

  • 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.

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.
ツールくん

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.

Más herramientas en esta categoría