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?
¿Por qué un campo aparece como opcional?
¿Puedo pegar JSON Lines o varias muestras?
¿Qué pasa con los arrays vacíos y los valores null?
¿Los textos con fechas se convierten en Date?
¿Elijo interface o type?
¿Para qué sirve la pestaña JSON Schema?
¿Mi JSON se envía a un servidor?
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.