JSON a TypeScript
Conversor online gratuito de JSON a TypeScript. Infiere automáticamente JSON en declaraciones de interface TS estándar. Soporta interfaces anidadas, uniones, campos opcionales y readonly, opciones de sangría 2/4 espacios, 100% en el navegador.
Relacionado
Acerca de JSON a TypeScript: convierte datos JSON en tipos TS automáticamente
JSON a TypeScript es el proceso de convertir datos en formato JSON (objetos o arrays JSON) en declaraciones de interface de TypeScript. JSON (JavaScript Object Notation) es el formato de datos estándar para APIs REST, archivos de configuración y logs, mientras que TypeScript es un superconjunto estáticamente tipado de JavaScript. En el desarrollo cotidiano, escribir interfaces TS a mano a partir del JSON de la API es propenso a errores y consume tiempo; esta herramienta automatiza ese flujo de trabajo.
En su núcleo, la herramienta infiere la estructura de un objeto JSON y emite una interface de TypeScript. Cada clave del objeto se convierte en una propiedad de la interface; el tipo literal de cada valor se asigna a su contraparte TS: las cadenas se convierten en `string`, los números en `number`, los booleanos en `boolean`, null en `null`, los arrays en `T[]` y los objetos anidados en sub-interfaces independientes.
La inferencia de tipos es el corazón de JSON a TypeScript. JSON tiene solo seis tipos primitivos (null, boolean, number, string, array, object), mientras que el sistema de tipos básico de TypeScript incluye string, number, boolean, null, undefined, any, unknown, void, never, object, Array, T[], tipos unión (A | B) y más. La función getTsType de la herramienta asigna cada valor según su typeof y forma: typeof null se asigna a `null`; typeof undefined a `undefined`; typeof boolean a `boolean`; typeof number a `number`; typeof string a `string`; Array.isArray() activa el manejo de arrays.
El manejo de objetos anidados es una capacidad clave. Cuando el JSON contiene objetos anidados, la herramienta genera recursivamente sub-interfaces independientes para evitar duplicación. Por ejemplo, `address: { street, city }` produce una sub-interface RootAddress, y la interface principal la referencia a través de `address: RootAddress`. Los nombres de las sub-interfaces siguen la convención de nombre del padre + nombre del campo en PascalCase.
La inferencia de tipos de array tiene tres modos. Primero, los arrays vacíos recurren a `any[]` porque no hay tipo de elemento que inspeccionar. Segundo, cuando todos los elementos comparten el mismo tipo, el resultado es `T[]` (por ejemplo, `string[]` o `User[]`). Tercero, cuando los tipos de elementos difieren, el resultado es un array unión `(A | B)[]` (por ejemplo, `(string | number)[]`).
Los campos opcionales (?) son importantes bajo TypeScript strict mode. Cuando la opción está activada, la herramienta escanea el valor de cada campo; si ve null o undefined, agrega `?` a ese campo en la interface, p. ej., `name?: string` significa que el campo puede faltar. Esto es invaluable para APIs backend que devuelven campos opcionales. Los campos readonly enfatizan la inmutabilidad, produciendo código como `readonly id: number` para configuración, instantáneas de estado o DTOs.
interface vs type alias es una elección común para usuarios de TypeScript. La herramienta genera interfaces porque son la forma estándar de describir la forma de un objeto: soportan declaración de fusión, la palabra clave implements y herencia extends. Los type aliases brillan para tipos unión e intersección y firmas de función, pero para tipos de objeto interface es la opción preferida.
La conversión en tiempo real es una función práctica. La herramienta convierte 400ms después de dejar de escribir, sin necesidad de hacer clic en un botón. Combinado con el resaltado de sintaxis TypeScript de CodeMirror, los usuarios pueden ver inmediatamente la interface generada e iterar rápidamente. Este ciclo de retroalimentación acelera drásticamente el diseño de tipos.
La auto-reparación de errores JSON aumenta la resiliencia de la herramienta. El JSON del mundo real a menudo tiene comas finales, comillas simples, comillas faltantes o comentarios. La rutina incorporada tryFixJSON se activa cuando JSON.parse falla e intenta corregir errores comunes.
El procesamiento puramente del lado del cliente es la decisión arquitectónica central. Todo el análisis JSON, la inferencia de tipos y la generación de interface se ejecutan en JavaScript del navegador; nunca se envía nada a un servidor. Los dos beneficios clave: primero, el JSON puede contener datos sensibles (claves API, tokens, registros de usuarios) y el procesamiento local elimina cualquier riesgo de fuga; segundo, la velocidad de conversión está limitada solo por la CPU del dispositivo.
Casos de uso
- Convierte rápidamente respuestas JSON de REST API o GraphQL en interfaces TS durante el desarrollo frontend, evitando escribir definiciones de tipos a mano.
- Genera tipos TS para Props, State y parámetros de componentes React/Vue/Angular a partir de JSON de muestra en segundos.
- Comparte tipos entre frontend y backend en un proyecto TypeScript full-stack, usando el JSON mock del backend como fuente única de verdad.
- Genera interfaces de TypeScript al integrar APIs de terceros (envíos, clima, pagos) sin leer documentación extensa.
- Ingeniería inversa de definiciones de tipos a partir de datos mock, fixtures de prueba o archivos de configuración JSON para reforzar la seguridad de tipos y los hints del IDE.
- Convierte exportaciones de JSON Schema de ORMs de bases de datos en interfaces de TypeScript para definiciones DTO de backend en Node.js.
- Aprende TypeScript convirtiendo JSON existente en ejemplos de interface para entender tipos anidados, uniones y campos opcionales.
- Refactoriza object literals dispersos de JS en interfaces formales para mejorar la legibilidad del código y la seguridad de tipos.
Cómo Usar
- Pega JSON en el editor izquierdo, haz clic en Subir para seleccionar un archivo .json/.txt, o haz clic en Muestra para cargar el ejemplo integrado.
- Haz clic en el botón del nombre de interface a la derecha de la barra de herramientas (o el icono de engranaje) para renombrar la interface raíz (por defecto Root) y alternar campos opcionales/readonly.
- La herramienta convierte automáticamente con un debounce de 400ms. Visualiza la interface de TypeScript generada a la derecha con resaltado de CodeMirror.
- Cambia entre sangría de 2 y 4 espacios desde la barra de herramientas y ajusta la división entre los paneles izquierdo y derecho para una mejor visualización.
- Haz clic en Copiar para poner el código TS en el portapapeles, o haz clic en Descargar para guardarlo como un archivo `${interfaceName}.ts` (p. ej., User.ts).
- Pega el código en el directorio `types/` o `src/types/` de tu proyecto e impórtalo donde sea necesario.
Características
- Inferencia inteligente de tipos: reconoce automáticamente null, boolean, number, string, array y object y los asigna a tipos TS nativos.
- Expansión de objetos anidados: cada objeto anidado se convierte en su propia sub-interface (p. ej., RootAddress) para una jerarquía de tipos limpia y sin duplicaciones.
- Inteligencia de tipos de array: arrays homogéneos se convierten en `T[]`, arrays de tipo mixto en uniones `(A | B)[]`, arrays vacíos recurren a `any[]`.
- Marcado de campos opcionales: cuando está activado, los campos null o undefined reciben el modificador `?`, produciendo código compatible con TypeScript strict mode.
- Soporte de campos readonly: cuando está activado, cada campo recibe el modificador `readonly`, ideal para estado inmutable, configuración y DTOs.
- Nombre de interface personalizado: el nombre de la interface raíz es configurable (por defecto Root) y el archivo descargado se nombra después de él (p. ej., User.ts).
- Opciones de sangría 2/4 espacios: cambia entre sangría de 2 espacios (predeterminado ESLint) y 4 espacios desde la barra de herramientas.
- Conversión automática en tiempo real: la herramienta convierte 400ms después de dejar de escribir, admitiendo pegar, subir archivo y carga de muestra.
- Auto-reparación de errores JSON: la rutina incorporada tryFixJSON maneja comas finales, comillas simples y comillas faltantes automáticamente.
- Resaltado de código TypeScript: el editor derecho usa CodeMirror con la extensión de lenguaje TypeScript para coloreado de sintaxis claro.
- Copiar y descargar: copia el resultado al portapapeles con un clic o guárdalo como archivo .ts estándar listo para tu proyecto.
- 100% en el navegador: todo el análisis, inferencia y generación de interface ocurre en JavaScript del lado del cliente; el JSON original nunca sale de tu dispositivo.
Preguntas Frecuentes
¿Cómo convierto JSON en una interface de TypeScript?
Pega tu JSON en el editor izquierdo y la herramienta infiere automáticamente el tipo de cada campo (string, number, boolean, array, object, etc.) y genera una interface de TypeScript estándar. Los objetos anidados se extraen en sub-interfaces separadas. La conversión se ejecuta automáticamente 400ms después de dejar de escribir.
¿La herramienta genera type aliases o interfaces?
Esta herramienta genera exclusivamente declaraciones de interface de TypeScript (no se producen type aliases). Las interfaces son la forma estándar de describir la forma de un objeto en TypeScript: soportan declaración de fusión (declaration merging) y la palabra clave implements.
¿Cómo marco campos como opcionales?
Activa "Campos opcionales (?)" en el panel de configuración. La herramienta escanea el valor de cada campo y, cuando encuentra null o undefined, agrega automáticamente el modificador `?` a la interface. Por ejemplo, `name?: string` significa que el campo puede faltar.
¿Cómo genero campos readonly?
Activa "Campos readonly" en el panel de configuración. Cada campo recibe el modificador `readonly`, por ejemplo `readonly id: number`. Esto enfatiza la inmutabilidad y es ideal para configuración, instantáneas de estado o definiciones DTO.
¿Cómo maneja la herramienta los arrays?
La herramienta analiza los tipos de elementos de cada array. Cuando todos los elementos comparten el mismo tipo, emite `T[]` (por ejemplo, `string[]`); cuando los tipos difieren, emite un array unión `(A | B)[]` (por ejemplo, `(string | number)[]`); cuando el array está vacío, recurre a `any[]`.
¿Un objeto anidado se convierte en su propia interface?
Sí. Cada objeto anidado se convierte en su propia sub-interface nombrada combinando el nombre de la interface padre con el nombre del campo en PascalCase. Por ejemplo, una interface Root que contiene un objeto `address` produce Root y RootAddress.
¿Puedo personalizar el nombre de la interface?
Sí. Haz clic en el botón del nombre de interface a la derecha de la barra de herramientas (o abre el diálogo de configuración) para renombrar la interface raíz (el valor por defecto es Root). El archivo .ts descargado también se nombrará con este valor.
¿El archivo .ts descargado se puede usar directamente en un proyecto?
Sí. El código generado sigue las mejores prácticas de TypeScript, incluye definiciones de tipos completas, interfaces anidadas y tipos unión, y se puede pegar en proyectos React, Vue, Angular o Node.js tal cual.
¿Qué pasa si mi JSON falla al parsear?
Cuando el JSON contiene comas finales, comillas faltantes o comillas simples en lugar de dobles, la herramienta llama automáticamente a tryFixJSON para intentar repararlo. Si la reparación tiene éxito, se te notificará; si no, el panel derecho muestra la ubicación exacta del error.
¿Qué estructuras JSON son compatibles?
Todo JSON válido es compatible: primitivos (null, boolean, number, string), arrays de cualquier profundidad, objetos anidados a cualquier profundidad y arrays de tipo mixto (que se convierten en tipos unión). Las entradas inválidas como funciones, Symbols o valores undefined no forman parte de la especificación JSON y no se aceptan.
¿Puedo elegir el tamaño de la sangría?
Sí. Un menú desplegable en la barra de herramientas derecha te permite cambiar entre sangría de 2 y 4 espacios. Dos espacios coinciden con el valor por defecto de ESLint/Prettier; cuatro espacios se adaptan a proyectos que prefieren una sangría más amplia.
¿En qué se diferencia esto de JSON Schema o Zod?
JSON Schema es ideal para validación de datos en tiempo de ejecución (límites de API, validación de entrada de usuario). Zod y yup son validadores en tiempo de ejecución amigables con TypeScript que pueden derivar tipos TS a partir de un esquema. Esta herramienta es un generador ligero solo de definiciones de tipos; no realiza verificaciones en tiempo de ejecución, se enfoca en tipado estático frontend, es más rápido y no tiene dependencias.
Solución de problemas
La interface generada parece incorrecta. ¿Qué debo hacer?
Causas comunes: fallo de análisis JSON, identificación incorrecta de objetos anidados o inferencia de tipo de array incorrecta. Intenta estos pasos: 1) Valida el JSON con un formateador JSON; 2) Para objetos anidados, verifica las referencias de sub-interface; 3) Para arrays, confirma que los tipos de elementos sean consistentes; 4) Regenera o edita manualmente la salida. La interface es un primer borrador, así que siempre ajusta los detalles contra la API real.
El archivo .ts descargado falla al compilar en mi proyecto.
Causas probables: 1) tsconfig.json no tiene strict mode pero el código generado usa readonly; 2) el nombre de la interface choca con un tipo existente; 3) un nombre de campo es una palabra clave de TypeScript (como class o type). Solución: ajusta el modo strict, renombra la interface o cita el campo en conflicto (p. ej., "class": string).
El JSON contiene arrays anidados pero el tipo inferido es incorrecto.
La herramienta maneja arrays multidimensionales (p. ej. [[1, 2], [3, 4]]) recursivamente y produce number[][]. Si los tipos de elementos del array anidado difieren, la herramienta emite ((A | B)[])[] . Los arrays vacíos siempre se convierten en any[] porque no hay tipo de elemento que inferir.
Los valores null se asignan al tipo `null` en lugar de campos opcionales.
Por defecto, la herramienta asigna valores JSON null al tipo `null` de TS (p. ej., middleName: null). Para producir campos opcionales: 1) activa la opción Campos opcionales (recomendado); 2) elimina los valores null del JSON para que el campo falte; o 3) después de la generación, cambia manualmente `null` a `string | null` o usa `?`.
El nombre de la interface y el nombre del archivo descargado no coinciden.
Ambos están impulsados por el mismo valor, la configuración Nombre de la interface (predeterminado Root). El archivo descargado se llama `${interfaceName}.ts`. Si parecen desincronizados, verifica si la herramienta está abierta en varias pestañas con configuraciones diferentes. Vuelve a abrir la página o actualiza la configuración para alinearlos.
El código generado está lleno de tipos `any`.
Causas probables: 1) el JSON contiene valores que el analizador no pudo reconocer; 2) los arrays están vacíos por lo que recurren a any[]; 3) los campos son null y la opción opcional está desactivada. Solución: verifica la integridad de los datos, agrega más datos de muestra para mejorar la inferencia o especifica manualmente los tipos para campos que siempre están vacíos (p. ej., User[]).
¿Cómo fusiono la interface generada con un tipo existente?
Las interfaces de TypeScript admiten declaración de fusión: interfaces con el mismo nombre fusionan automáticamente sus miembros. Solo declara una interface con el mismo nombre en tu proyecto y expórtala; por ejemplo, la herramienta emite `export interface User { id: number }` y tú escribes `export interface User { name: string }`, y se fusionan en `{ id: number; name: string }` automáticamente.
Glosario
- JSON (JavaScript Object Notation)
- Formato ligero de intercambio de datos basado en la sintaxis de objetos de JavaScript pero independiente de cualquier lenguaje de programación. Admite seis tipos básicos: objeto ({}), array ([]), string, number, boolean y null.
- TypeScript
- Superset de JavaScript desarrollado por Microsoft que añade definiciones de tipos estáticos, interfaces, genéricos y otras características. El código TypeScript se compila a JavaScript puro y se ejecuta en el navegador o en Node.js.
- interface
- Palabra clave de TypeScript que describe la forma de un objeto. Sintaxis: `interface Name { prop: type; }`. Soporta declaración de fusión, la palabra clave implements y herencia extends. La forma principal de describir tipos de objeto en TypeScript.
- type alias
- Palabra clave de TypeScript que asigna un nombre a un tipo. Sintaxis: `type Name = ...`. Útil para tipos unión, intersección y tipos de función. Esta herramienta emite exclusivamente interfaces.
- Inferencia de tipos
- El proceso que usa esta herramienta para decidir el tipo TS para cada valor JSON según su typeof y forma. Por ejemplo, typeof string se asigna a string, Array.isArray() activa el manejo de array, y typeof object activa una nueva sub-interface.
- Campo opcional (?)
- Modificador de TypeScript que marca un campo como posiblemente ausente. `name?: string` significa que el campo name puede no existir. Cuando la opción de campo opcional de la herramienta está activada, los campos con valor null o undefined reciben automáticamente el modificador `?`.
- Campo readonly
- Modificador de TypeScript que marca un campo como inmutable después de la creación del objeto. `readonly id: number` significa que id no puede ser reasignado.
- Tipo unión
- Tipo de TypeScript que permite que un valor sea uno de varios tipos. Escrito como `A | B`. La herramienta usa esta notación cuando los elementos del array tienen diferentes tipos.
- Tipo array
- Sintaxis de TypeScript para arrays, disponible en dos formas: la forma genérica `Array<T>` y la forma corta `T[]`. La herramienta siempre usa la forma corta y tiene tres modos de generación: homogéneo `T[]`, mixto `(A | B)[]`, y vacío `any[]`.
- Interface anidada
- Una interface que referencia otras interfaces para formar una jerarquía de tipos. La herramienta produce una sub-interface para cada objeto anidado, y la interface principal las referencia por nombre de propiedad.
- TypeScript strict mode
- Colección de opciones estrictas del compilador de TypeScript (noImplicitAny, strictNullChecks, strictFunctionTypes y más). Con strictNullChecks habilitado, null y undefined son tipos independientes.
- DTO (Data Transfer Object)
- Objeto utilizado para transferir datos entre capas (por ejemplo, entre una API y un servicio). Los proyectos TypeScript típicamente describen DTOs con interfaces, a menudo usando readonly para reforzar la inmutabilidad.
- Declaración de fusión
- Característica de TypeScript para interfaces: interfaces con el mismo nombre fusionan automáticamente sus miembros. Comúnmente usado para extender definiciones de tipos de bibliotecas de terceros.
- tsconfig.json
- Archivo de configuración del proyecto TypeScript en la raíz del proyecto. Contiene compilerOptions (target, module, strict y más), include y exclude.
- tryFixJSON
- Rutina de reparación JSON incorporada en la herramienta que maneja comas finales, comillas simples usadas en lugar de dobles, comillas faltantes, comentarios y otros errores comunes de sintaxis JSON.
Reglas de mapeo de tipos JSON a TypeScript
El conjunto completo de reglas que usa la función getTsType para asignar valores JSON a tipos TypeScript:
| Valor JSON | Ejemplo | Tipo TypeScript | Regla de detección |
|---|---|---|---|
null | null | null | JSON null se asigna directamente a TS null |
undefined | undefined | undefined | Los valores undefined se asignan a TS undefined (solo en tiempo de ejecución) |
boolean | true / false | boolean | typeof boolean se asigna a TS boolean |
integer | 1, 100, -9999 | number | Enteros y flotantes se asignan a TS number |
float | 3.14, -0.5, 1e10 | number | Todos los literales numéricos se asignan a number |
string | "Alice", "Madrid" | string | typeof string se asigna a TS string |
empty array | [] | any[] | Los arrays vacíos recurren a any[] |
homogeneous array | [1, 2, 3] | T[] (p. ej. number[]) | Elementos del mismo tipo producen un único tipo de array |
mixed array | [1, "a"] | (A | B)[] (p. ej. (number | string)[]) | Elementos de tipo mixto producen un array unión |
object | {a: 1, b: "x"} | SubInterface (p. ej. Root) | Los objetos anidados se convierten en sub-interfaces independientes que son referenciadas |
interface vs type alias: comparación
Por qué esta herramienta genera interface en lugar de type alias, y cómo se comparan en proyectos TypeScript:
| Capacidad | interface | type alias | Notas |
|---|---|---|---|
| Descripción de forma de objeto | ✓ (preferida) | ✓ (también admitida) | Ambas funcionan; la herramienta emite interface |
| Fusión de declaraciones | ✓ (mismo nombre se fusiona) | ✗ (error en duplicado) | interface permite extensión gradual |
| implements/extends | ✓ (clases pueden implements) | △ (solo objetos type) | interface es más natural en OOP |
| Tipos unión (A | B) | ✗ | ✓ | type es más conciso para uniones |
| Tipos intersección (A & B) | ✗ | ✓ | type es más conciso para intersecciones |
| Tipos de función | △ (requiere call signature) | ✓ (directo) | type es más intuitivo para funciones |
| Rendimiento (muchos tipos) | ligeramente más rápido | ligeramente más lento | interface se fusiona incrementalmente |
| Elección de esta herramienta | ✓ uso unificado | ✗ | Esta herramienta se enfoca en tipos de objeto |
Reglas de generación de campos opcionales y readonly
Cómo las dos opciones de alternancia afectan al código generado y cuándo usar cada una:
| Opción | Disparador | Sintaxis generada | Mejor para |
|---|---|---|---|
| Opcional (?): desactivado | (predeterminado) | name: string | Estricto, todos los campos requeridos |
| Opcional (?): activado | value === null || value === undefined | name?: string | Campos opcionales, datos faltantes |
| Readonly: desactivado | (predeterminado) | name: string | Tipos generales, campos editables |
| Readonly: activado | se aplica a todos los campos | readonly name: string | Estado inmutable, configuración, DTOs |
| Ambos activados | ambas condiciones se aplican | readonly name?: string | Instantáneas de respuesta API, configuración opcional |
Privacy & Security
Esta herramienta de JSON a TypeScript se ejecuta completamente en tu navegador. El análisis JSON, la inferencia de tipos y la generación de interface ocurren en JavaScript del lado del cliente; nada se envía a ningún servidor. Las cargas de archivos usan la API nativa FileReader y nunca pasan por un servicio intermedio. La herramienta no usa cookies de seguimiento y no recopila datos de entrada o uso. Todas las entradas y salidas se borran de la memoria en cuanto se cierra o recarga la página. Segura de usar con JSON que contenga claves API, tokens u otros datos confidenciales.
Authoritative References
- Compresión JSON
- CSV a JSON
- JSON a CSV
- JSON Diff
- JSON Escape / Unescape
- JSON Flatten
- Formateo JSON
- Generador de JSON
- Consulta JSONPath
- Fusionar JSON
- Reparar JSON
- Validador JSON Schema
- Ordenar JSON
- JSON Stringify
- JSON a HTML
- JSON a Java
- JSON to Markdown
- JSON a SQL
- JSON a TOML
- JSON a TypeScript
- XML a JSON
- JSON a XML
- YAML a JSON
- JSON a YAML
- JSON a Python
- JSON a Go
- JSON a Rust
- JSON a Swift
- JSON a C#
- JSON a C++
- JSON a PHP