JSON a TypeScript

Pega JSON y obtén interfaces TypeScript al instante. Propiedades opcionales, objetos anidados y arrays, manejo de null, salida interface o type.

🌐 English

🔒 Privado por diseño: tu texto se procesa localmente en tu navegador; nada se sube nunca a ningún servidor.

Escrito y mantenido por Última actualización

Cómo convertir JSON en interfaces de TypeScript

  1. Pega un objeto JSON (o un array de objetos JSON) en la caja de arriba. Una respuesta de API real, un archivo de configuración o un único registro de muestra sirven.
  2. Elige tu estilo de salida: interface (por defecto y lo más idiomático para una forma de datos) o un alias type.
  3. Ajusta las opciones si quieres, marca como opcionales las claves que a veces faltan (key?:), añade la palabra clave export y elige si los valores vacíos/null/mixtos se convierten en unknown o any.
  4. Pulsa Procesar JSON a TypeScript y luego Copiar al portapapeles las interfaces generadas, o pega algo nuevo y vuelve a ejecutarlo.

Interfaces reales, no una plantilla plana

Muchas herramientas de “JSON a TypeScript” se limitan a imprimir key: type por cada campo y ahí acaban, lo que se cae en cuanto tu JSON tiene un objeto anidado, un array de registros o un campo que a veces falta. Esta herramienta infiere un tipo real para cada propiedad a partir de tus datos de muestra reales (distinguiendo números de cadenas y booleanos, y fusionando varios elementos de un array en una forma unificada y honesta), y genera una interfaz con nombre propio para cada objeto anidado y array de objetos que encuentra.

Un campo que contiene un objeto plano se convierte en su propia interfaz con nombre, referenciada por el padre (address: Address). Un array de objetos de la misma forma se convierte en un tipo de elemento con nombre (friends: Friend[]), derivando el nombre de la interfaz de una forma singular de la clave. Todo se emite empezando por la raíz para que el archivo se lea de forma natural de arriba abajo, y como TypeScript eleva (hoisting) las declaraciones de tipos, las interfaces se referencian entre sí correctamente sin importar el orden.

Opcional y anulable, inferidos de tus datos

Los dos detalles más útiles (y más a menudo mal resueltos) son la opcionalidad y la anulabilidad, y se tratan por separado porque significan cosas distintas. Cuando pegas un array de objetos, una clave ausente en al menos uno de esos objetos se marca opcional con ?; una clave presente pero null en al menos uno recibe | null. Una clave que a veces falta y a veces es null recibe ambas: key?: string | null. Esto refleja las respuestas de API reales, donde algunos campos solo aparecen bajo ciertas condiciones y otros se anulan explícitamente.

Los nombres de las propiedades quedan exactamente como tu JSON

A diferencia de un modelo generado de Python o Java, una interfaz de TypeScript no tiene mecanismo de alias de claves, el nombre de la propiedad es la clave del JSON. Por eso esta herramienta conserva tus claves literales en lugar de pasarlas a camelCase, porque una propiedad renombrada dejaría de coincidir con tus datos en silencio. Las claves que no son identificadores válidos de JavaScript (un guion, un punto, un dígito inicial, un espacio) se conservan tal cual y se entrecomillan, p. ej. "first-name": string; o "2fa": boolean;.

Tu JSON nunca sale de tu dispositivo

Todo (analizar tu JSON pegado, inferir tipos y generar las interfaces finales) se ejecuta con JavaScript puro dentro de tu propia pestaña del navegador. No hay subida, ni llamada a una API, ni ninguna copia de tus datos almacenada en ningún sitio salvo tu dispositivo.

Usos comunes

Cómo funciona, en imágenes

Captura de pantalla de la herramienta JSON a TypeScript con la entrada de ejemplo «{"slug":"png-to-jpg","category":"image","free":t…», Output style en interface Foo { ... }, Mark sometimes-missing keys as optional (key?:) en on
JSON a TypeScript en pleno proceso: la entrada de ejemplo «{"slug":"png-to-jpg","category":"image","free":t…», Output style en interface Foo { ... }, Mark sometimes-missing keys as optional (key?:) en on.
Captura de pantalla del resultado de JSON a TypeScript mostrando la salida generada «export interface Root { slug: string; category: …»
El resultado final: la salida generada «export interface Root { slug: string; category: …». El enlace de descarga es una URL blob local: el archivo nunca sale de tu dispositivo.

Preguntas frecuentes

¿La interfaz y los botones aparecen en español?

El código TypeScript que se genera es correcto e idéntico en ambos idiomas: las palabras clave (`interface`, `type`, `string`, `number`, `boolean`, `unknown`, `null`) son sintaxis universal de TypeScript, no palabras en inglés que haya que traducir, y los nombres de las propiedades salen tal cual de tu JSON (en el idioma que estén). Ahora bien, hay unas pocas cadenas fijas en inglés: la interfaz raíz siempre se llama `Root`, el comentario final que indica cuando el JSON es un array (`// The root JSON value is an array of Root: Root[]`) y los propios botones del componente compartido ("Copy to clipboard", "Process another"). Renombrar `Root` es un cambio de una línea en tu editor.

¿Se sube mi JSON a algún servidor?

No. El análisis de tu JSON pegado y la generación del TypeScript ocurren íntegramente dentro de la pestaña de tu navegador con JavaScript puro, no hay subida ni procesamiento en el servidor. El JSON suele llevar datos reales (respuestas de API, tokens, registros de base de datos), así que nada de lo tuyo sale nunca de tu dispositivo.

¿Cómo decide qué propiedades son opcionales?

A partir de tus datos de muestra reales, no adivinando. Cuando pegas un array de objetos, una clave que falta en al menos uno de esos objetos se marca como opcional (`key?:`). Una clave que está presente pero es `null` en al menos un objeto recibe en cambio `| null`. Se rastrean de forma independiente, porque "a veces ausente" y "a veces presente pero null" son formas de JSON genuinamente distintas, una clave puede ser ambas (`key?: string | null`). Un único objeto pegado (no dentro de un array) no tiene otras muestras con las que comparar, así que toda clave se trata como presente.

¿Por qué se conservan los nombres de las propiedades tal cual en lugar de pasarlos a camelCase?

Porque una interfaz de TypeScript describe la forma real de tu JSON y (a diferencia de un modelo de Python o Java) no tiene mecanismo de alias (nada de `@JsonProperty` ni `Field(alias=...)`). El nombre de la propiedad ES la clave del JSON, así que renombrar `first_name` a `firstName` haría que la interfaz dejara de coincidir con tus datos en silencio. Las claves que no son identificadores válidos de JavaScript (con guion, punto, espacio o que empiezan por un dígito) se conservan literales y simplemente se entrecomillan, p. ej. `"first-name": string;`.

¿Qué pasa con un array vacío, un array de tipos mixtos o un valor siempre null?

Un valor sin tipo inferible cae a `unknown` (o `any`, tú eliges) en lugar de adivinar. Eso cubre un array vacío (`[]` → `unknown[]`), un array de primitivos genuinamente mixtos (`[1, "two", true]` → `unknown[]`) y un campo que siempre es `null`. `unknown` es el valor por defecto más seguro (te obliga a acotar el tipo antes de usarlo) pero puedes cambiar la opción a `any` si lo prefieres. En cambio, un array de objetos de la misma forma sí se convierte en un tipo con nombre como `Item[]`.

¿Puedo renombrar la interfaz raíz o tiene que ser "Root"?

La interfaz de nivel superior siempre se llama `Root` (los objetos anidados se nombran según su propia clave, p. ej. un array `friends` de objetos se convierte en una interfaz `Friend`). No hay un campo de texto libre para escribir un nombre a medida, ya que el formato de opciones de la herramienta solo admite desplegables y casillas, pero es un cambio de una línea en tu editor, y todo lo demás de la salida sigue siendo correcto.

Herramientas relacionadas