Generador de interfaces TypeScript a partir de JSON
Genera declaraciones de interfaces de TypeScript a partir de JSON. Infiere los tipos de TypeScript correctos para cadenas, números, booleanos, arrays, objetos anidados y valores nulos, generando definiciones de tipos listas para usar en las respuestas de tu API y en tus modelos de datos.
Infiere tipos de TypeScript a partir de tipos de valores JSON (string, number, boolean, null, array, object).
Genera declaraciones de interfaces anidadas para objetos JSON con un alto nivel de anidamiento.
Gestiona matrices infiriendo el tipo de elemento a partir del primer elemento de la matriz.
Genera nombres de interfaz limpios en PascalCase.
La salida está lista para pegarse en archivos fuente o archivos de declaración de TypeScript.
Cómo usarlo
Pega un objeto JSON en el campo de entrada.
El generador infiere los tipos a partir de los valores y genera interfaces de TypeScript.
Copia las declaraciones de interfaz en tu archivo .ts o .d.ts.
Ajustar los campos opcionales (añadir ?) donde las claves puedan estar ausentes en los datos reales.
Integración de API
- Tipos de payloads de respuesta de API
- Generar interfaces a partir de ejemplos de Swagger/OpenAPI
- Obtención de datos con seguridad de tipos mediante fetch o axios
Desarrollo frontend
- Tipar los slices del store de Redux a partir de datos de la API
- Generar interfaces de datos de formulario
- Tipar las props de componentes React a partir de configuraciones JSON
Ecosistema de TypeScript
- React
- Next.js
- Angular
- Vue 3
- Node.js
- Deno
Marca como opcionales (con un ?) aquellos campos que a veces no aparecen en las respuestas reales de la API, ya que el generador asume que todos los campos son obligatorios.
Si una matriz JSON está vacía, no se puede inferir el tipo de los elementos; sustituye `unknown[]` por el tipo correcto tras la generación.
Para los tipos de unión (un campo que puede ser string | number), añade la unión manualmente después de generar la interfaz base.
Revisa las interfaces generadas frente a la documentación completa de la API y añade marcadores de opcionalidad (?) para los campos que puedan estar ausentes.
Reemplaza null por el tipo de unión correspondiente (string | null, number | null) una vez que sepas qué campos admiten valores nulos.
Para los arrays vacíos en el ejemplo JSON, sustituye inmediatamente el `unknown[]` generado por el tipo de elemento correcto.
Preguntas frecuentes
Encuentra respuestas a las preguntas más comunes sobre nuestras herramientas y servicios.
Entender De JSON a interfaz de TypeScript
TypeScript se ha convertido en el lenguaje predominante para el desarrollo de aplicaciones JavaScript a gran escala, y su propuesta de valor fundamental es la seguridad de tipos en tiempo de compilación. Al consumir API REST, procesar archivos de configuración JSON o gestionar datos de fuentes externas, los desarrolladores de TypeScript necesitan definiciones de tipos precisas que describan la estructura de los datos entrantes. Sin los tipos adecuados, los objetos de respuesta de la API se clasifican como `any`, lo que anula por completo el propósito de TypeScript: el autocompletado del IDE falla, la refactorización deja de ser segura y los errores de tipo que se detectarían en tiempo de compilación aparecen en su lugar como excepciones en tiempo de ejecución. Generar interfaces de TypeScript a partir de ejemplos JSON reales es la forma más rápida de crear definiciones de tipos precisas cuando no se dispone de una especificación formal de OpenAPI o JSON Schema.
El algoritmo de inferencia de tipos para la conversión de JSON a TypeScript asigna cada tipo de valor JSON a su equivalente en TypeScript mediante un conjunto de correspondencias directas. Las cadenas JSON se convierten en `string` de TypeScript. Los números JSON (tanto enteros como de punto flotante, ya que JSON no los distingue) se convierten en `number` de TypeScript. Los booleanos JSON se convierten en `boolean` de TypeScript. El valor `null` de JSON se convierte en `null` de TypeScript. Los objetos JSON se convierten en declaraciones de interfaz de TypeScript, donde cada clave actúa como una propiedad obligatoria tipada según el tipo inferido de su valor. Los arrays JSON se convierten en tipos de array de TypeScript (`ElementType[]`), donde el tipo del elemento se infiere a partir del primer elemento del array. Estas asignaciones permiten gestionar la gran mayoría de las estructuras de datos de API del mundo real sin ambigüedades.
Los objetos JSON anidados se gestionan generando interfaces con nombre independientes para cada estructura de objeto distinta, lo cual resulta más limpio y reutilizable que el uso de tipos anónimos definidos en línea. Una respuesta JSON con un objeto de usuario de nivel superior que contiene un objeto de dirección con un campo de ciudad genera tres interfaces: `Address` (que contiene `city: string`), `User` (que contiene `address: Address`) y `Root` (que contiene `user: User`). Esta descomposición jerárquica sigue el estilo recomendado en la documentación de TypeScript y genera interfaces que pueden importarse, extenderse o reutilizarse individualmente en toda la base de código. Los nombres de las interfaces se derivan de los nombres de las claves JSON siguiendo la convención PascalCase.
Una limitación práctica de la generación de tipos basada en muestras JSON es que el generador solo puede inferir lo que está presente en el ejemplo proporcionado. Si un campo puede ser nulo o una cadena de texto en las respuestas reales de la API, pero el ejemplo solo muestra el caso de la cadena, el tipo generado será `string` en lugar de `string | null`. Si algunos campos son opcionales (a veces presentes y a veces ausentes), el generador los marcará como obligatorios, ya que aparecen en la muestra. Los desarrolladores deben considerar las interfaces generadas como un punto de partida y refinarlas consultando la documentación completa del contrato de la API, añadiendo tipos de unión, marcadores de opcionalidad (?) y genéricos según sea necesario para representar con precisión el modelo de datos completo.