BrowserTools
Inicio / Conversores / JSON a TypeScript

JSON a TypeScript

Pega un ejemplo de tus datos JSON y obtén los tipos TypeScript que los describen.

Cargando JSON a TypeScript… Si no ocurre nada, activa JavaScript.

Escribir a mano los tipos TypeScript de una respuesta de API es lento y fácil de equivocar, sobre todo cuando el contenido es profundo o algunos campos solo aparecen de vez en cuando. Pega un ejemplo real de JSON en esta herramienta y deducirá los tipos por ti mientras escribes. Cada objeto anidado se convierte en su propia interfaz con nombre, tomado de la clave donde está y pasado a PascalCase: una clave address da una interfaz Address y un array projects da una interfaz Project para sus elementos. Los objetos con exactamente la misma forma se declaran una sola vez y se reutilizan, y los nombres que chocarían entre sí o con tipos integrados como Date, Response o Location reciben un sufijo, para que el resultado compile tal cual.

Preguntas frecuentes

¿Cómo se convierten los objetos anidados en interfaces?
Cada objeto con al menos una clave pasa a ser una interfaz aparte con nombre. El nombre viene de la clave que lo contiene, pasada a PascalCase: billing_address da BillingAddress. Los elementos de un array reciben la forma en singular de la clave, así que orders da Order y categories da Category. El objeto raíz usa el nombre que escribas en la casilla Root name.
¿Por qué un campo aparece como opcional?
Porque faltaba en al menos uno de los objetos combinados en esa posición. Si pegas un solo objeto, todos los campos son obligatorios. Si pegas un array de objetos, o JSON Lines, un campo solo sigue siendo obligatorio cuando todas las muestras lo tienen. Con la opción "Optional instead of | null", los campos que a veces eran null también se escriben como opcionales en lugar de recibir | null.
¿Puedo pegar JSON Lines o varias muestras?
Sí. Si el texto no es un único documento JSON pero cada línea no vacía es JSON válido, se lee como JSON Lines y todas las líneas se combinan en un solo tipo. En un array JSON normal puedes activar "Top-level array is a list of samples" para que los elementos se combinen en el propio tipo raíz, en lugar de producir type Root = RootItem[].
¿Qué pasa con los arrays vacíos y los valores null?
Un array que siempre estuvo vacío no dice nada de sus elementos, así que queda como unknown[]. Un campo que solo fue null queda como null. Ambos casos aparecen en las notas debajo del resultado. Lo mejor es pegar una muestra en la que esos campos tengan valores reales, porque la herramienta solo puede describir los datos que ve.
¿Los textos con fechas se convierten en Date?
No. JSON no tiene tipo de fecha, así que después de JSON.parse una fecha sigue siendo un string, y tiparla como Date sería incorrecto en tiempo de ejecución. La herramienta la deja como string, indica en las notas qué campos parecen fechas ISO 8601 y añade format date-time o date a esos campos en el JSON Schema.
¿Elijo interface o type?
Para formas simples de objetos son casi equivalentes. Las interfaces se pueden extender y fusionar, y muchas guías de estilo las prefieren para modelos de datos. Los alias type son necesarios para las uniones y algunos equipos los prefieren por coherencia. Cuando la raíz no es un objeto, por ejemplo un array o un valor primitivo, la raíz siempre es un alias type, porque una interfaz no puede describirlos.
¿Para qué sirve la pestaña JSON Schema?
JSON Schema describe la misma estructura en un formato independiente del lenguaje que entienden validadores como Ajv, las herramientas de OpenAPI y muchos editores. El schema generado usa el draft 2020-12, pone los objetos anidados en $defs enlazados con $ref, lista en required los campos presentes en todas las muestras y distingue integer de number. Úsalo como punto de partida y ajústalo con patrones, enums o límites.
¿Mi JSON se envía a un servidor?
No. La lectura y la deducción de tipos son JavaScript que se ejecuta en tu navegador. Nada de lo que pegas o abres se sube ni se guarda, así que puedes usar respuestas de API reales, tokens o datos personales con total seguridad.

Acerca de JSON a TypeScript

Cuantas más muestras le des, mejores serán los tipos. Pega un array de registros, varios documentos JSON en formato JSON Lines (un objeto por línea, como en archivos de log y exportaciones NDJSON), o activa la opción que trata un array de nivel superior como una lista de muestras. La herramienta combina todos los valores que encuentra en la misma posición: un campo que falta en algunos objetos pasa a ser opcional, un campo que a veces es null recibe | null (o pasa a opcional, si prefieres ese estilo), un valor que es texto en un registro y número en otro se convierte en una unión, y los arrays con elementos variados dan (A | B)[]. Los arrays que siempre estuvieron vacíos quedan como unknown[] y los campos que solo fueron null quedan como null, y ambos aparecen en las notas para que sepas cuáles completar a mano. Las claves que no son identificadores válidos, como content-type o 2fa, se ponen entre comillas automáticamente.

Tú controlas el estilo del resultado: el nombre del tipo raíz, interface o alias type, si las declaraciones se exportan, propiedades y arrays readonly, y los puntos y comas. Una segunda pestaña genera un JSON Schema (draft 2020-12) a partir de la misma deducción, con los objetos anidados en $defs, listas required para los campos presentes en todas las muestras, integer frente a number y el formato date-time o date para los textos que parecen fechas ISO 8601. JSON no tiene tipo de fecha, así que esos campos siguen siendo string en TypeScript. Ambos resultados se pueden copiar o descargar como archivo .ts o .schema.json. Todo ocurre en tu navegador, así que las respuestas de API privadas y los datos de clientes nunca salen de tu dispositivo.

El sistema de tipos de TypeScript es Turing completo

Los tipos de TypeScript se pensaron para describir valores de JavaScript, pero los tipos condicionales, los alias recursivos y los template literal types han convertido el verificador de tipos en un pequeño lenguaje de programación. En 2017 una issue de GitHub mostró que el sistema de tipos es Turing completo, y desde entonces hay quien escribe parsers, aritmética y pequeños intérpretes que se ejecutan por completo dentro del compilador y devuelven sus resultados como tipos.

La parte práctica de todo esto es el tipado estructural. A TypeScript no le importa cómo se llama una interfaz, solo qué forma tiene, así que un objeto con los campos correctos cumple una interfaz que nunca ha visto. Por eso los tipos generados a partir de una muestra JSON encajan tan bien: describen la forma de los datos, y cualquier valor con esa forma se acepta.

Apoyar