Skip to content
JSON a TypeScript
Tools

JSON a TypeScript

Nuevo

Genera interfaces de TypeScript a partir de un ejemplo JSON, con tipos anidados.

Output

Runs entirely in your browser. Nothing is uploaded.

Convierte JSON a TypeScript en un clic

Este conversor de JSON a TypeScript genera interfaces, tipos o clases listas para usar a partir de una muestra JSON, para que nunca tengas que escribir manualmente un tipo para una respuesta de API. Pega un payload a la izquierda y TypeScript limpio y correctamente indentado aparece a la derecha al instante — cópialo o descárgalo como archivo .ts.

Es una alternativa rápida, gratuita y sin registro: un solo paso de JSON a interfaz TypeScript que se ejecuta completamente en tu navegador, con objetos anidados, arrays y uniones inferidas automáticamente. Sin límites de tamaño de archivo, sin cuotas de uso diario y nada sale nunca de tu dispositivo.

Interfaces, tipos o clases — tú eliges

Usa el selector de salida para cambiar entre una interface, un alias de type, o una class. El modo interface es el predeterminado y emite export interface Root { … }; el modo type produce export type Root = { … } para bases de código que prefieren alias; y el modo class declara los campos en un export class. El mismo JSON alimenta los tres, así que puedes compararlos con tus propios datos en segundos.

Puedes renombrar la raíz, activar o desactivar la palabra clave export, y la elección se recuerda para la próxima vez — convirtiendo esto en un generador de tipos TypeScript flexible en lugar de un conversor de una sola forma. quicktype.io también lo admite, pero requiere volver a ejecutar la conversión completa cada vez que cambias una opción.

Inferencia inteligente para objetos anidados, arrays y uniones

El motor recorre tu JSON y construye una interfaz nombrada para cada objeto, nombrando las interfaces anidadas a partir de sus claves y singularizando los elementos de array — un array orders se convierte en Order[]. Las formas idénticas se deduplicán en una sola interfaz, y los arrays de tipos mixtos colapsan en una unión como (string | number)[].

Activa la detección de enums y los valores de cadena repetidos se infieren como una unión literal — una columna de estado con "enviado" y "pendiente" se convierte en "pendiente" | "enviado" en lugar de un string genérico. Esa precisión hace que la salida parezca escrita a mano, y es lo que diferencia esta herramienta de los conversores más simples.

Campos opcionales, nulos y de solo lectura bien gestionados

Los datos reales de API son imperfectos, así que el conversor los maneja honestamente. Cuando conviertes una respuesta de API a TypeScript, las claves que aparecen solo en algunos elementos de un array se marcan como opcionales con ?, y tú decides cómo se tipan los nulos: mantenlos como una unión explícita | null, o activa null → opcional para convertir zip: string | null en zip?: string.

Un selector de readonly prefija cada propiedad con el modificador readonly para modelos inmutables. Juntas, estas opciones te permiten ajustarte a la estrictez de tu proyecto en lugar de luchar contra los tipos TypeScript generados desde JSON. La mayoría de herramientas competidoras omiten una o más de estas opciones.

Cómo se compara con quicktype, json2ts y MakeTypes

quicktype.io es la opción más completa para generación multi-idioma — apunta a Python, Go, C#, Kotlin y muchos otros lenguajes además de TypeScript. Esa amplitud significa que su salida TypeScript a veces incluye helpers de tiempo de ejecución y código adicional. También procesa tu JSON en sus servidores, lo que importa para payloads confidenciales. json2ts.com es más simple y genera interfaces básicas pero carece de detección de enums, soporte readonly y opciones de manejo de nulos que los proyectos en producción necesitan.

MakeTypes genera clases TypeScript con análisis en tiempo de ejecución, útil si quieres validación integrada pero añade un overhead de código significativo. Este conversor de UtiloKit genera tipos puros con cero huella en tiempo de ejecución — solo las interfaces o alias de tipo que tu código necesita, funcionando completamente en tu navegador sin subida al servidor y sin cuenta.

Privado por diseño — tu JSON nunca sale del navegador

Cada conversión ocurre localmente usando JavaScript en tu pestaña. Tu JSON nunca se sube a un servidor, se almacena ni se comparte — funciona sin conexión y es seguro para payloads confidenciales, APIs internas y datos de producción. Guarda como marcador este conversor de JSON a TypeScript y úsalo cada vez que necesites tipos rápidamente.

El analizador tolerante incluso acepta entrada JSON-ish con // comentarios, comas finales y cadenas con comillas simples, así que puedes pegar un objeto literal de JavaScript desde tu editor y seguir obteniendo una salida válida. No se necesita ningún paso adicional.

Frequently asked questions

¿Cómo convierto JSON a TypeScript?

Pega tu JSON en el panel de entrada (o presiona Muestra para cargar un ejemplo) y el TypeScript correspondiente aparece instantáneamente en el panel de salida — nada que instalar ni registrarse. Por ejemplo, {"id": 1, "nombre": "Ana"} se convierte en export interface Root { id: number; nombre: string; }. Haz clic en Copiar o Descargar .ts para añadir los tipos directamente a tu proyecto.

¿Cómo genero una interfaz TypeScript a partir de JSON?

Deja la salida configurada en Interface (predeterminada) y cada objeto JSON se convierte en su propio export interface. Configura el campo Nombre raíz para controlar el nombre del nivel superior. Por ejemplo { "id": 1, "nombre": "Ana" } con un nombre raíz de Usuario produce export interface Usuario { id: number; nombre: string; }. Los objetos anidados se convierten automáticamente en sus propias interfaces nombradas.

¿Cuál es la diferencia entre una interface y un alias de tipo?

Ambos describen la misma forma de objeto — elige el que prefiera tu base de código usando el selector Interface / Type / Class. El modo Interface emite export interface Root { … }, que puede reabrirse y extenderse con fusión de declaraciones; el modo Type emite export type Root = { … }, que también puede expresar uniones y primitivos; el modo Class emite export class Root { … } con campos declarados. Para un objeto simple los tres son intercambiables en tiempo de ejecución.

¿Cómo manejo campos opcionales o nulos (? / | null)?

Dos selectores controlan esto. 'Opcional (?) para claves faltantes' marca como opcional cualquier propiedad ausente en algunos elementos de un array de objetos. 'null → opcional' reescribe un campo nullable como zip: string | null en zip?: string; desactívalo para mantener la unión explícita | null. Combínalos para adaptarte al estilo de manejo de nulos de tu equipo.

¿Cómo convierto JSON anidado en interfaces anidadas?

El anidamiento se maneja automáticamente. Cada objeto anidado se convierte en su propia interfaz nombrada según su clave, y el padre la referencia. Por ejemplo { "direccion": { "ciudad": "Madrid" } } produce interface Direccion { ciudad: string; } más direccion: Direccion; en el padre. Los arrays de objetos obtienen un nombre de elemento singularizado.

¿Es seguro pegar JSON aquí?

Sí. La conversión es 100% del lado del cliente: tu JSON se analiza y convierte a TypeScript por JavaScript que se ejecuta en tu propia pestaña del navegador, y nunca se sube, registra ni envía a ningún servidor. Puedes desconectarte de internet y la herramienta sigue funcionando, lo que la hace segura para respuestas de API privadas y payloads confidenciales.

¿Cómo funciona la detección de enums de cadena?

Activa 'Detectar enums de cadena' y una columna de cadenas repetidas como 'enviado' y 'pendiente' se infiere como una unión literal "pendiente" | "enviado" en lugar de un simple string. Esto hace que los tipos generados sean mucho más precisos y útiles que los que producen los conversores simples.