JSON a TypeScript
Convierte un documento JSON de ejemplo en interfaces o alias de tipo de TypeScript, con campos opcionales y uniones deducidos de tus datos.
Funciona completamente en tu navegador
Los tipos se deducen del ejemplo que pegas, así que describen ese ejemplo y no un esquema: un campo que es una cadena en tu ejemplo puede ser un número en otro lugar. Todos los números son number y las fechas quedan como string. El orden de las propiedades sigue a JSON.parse, que lista primero las claves que son números enteros.
Cómo generar TypeScript a partir de JSON
- Pega una respuesta o un archivo JSON en el cuadro. Varios elementos en un arreglo mejoran el resultado, porque los campos que faltan en algunos elementos pasan a ser opcionales.
- Escribe el nombre del tipo de nivel superior, elige
interfaceotypey marca export, readonly o la detección de opcionales según necesites. - Copia las declaraciones o descárgalas como archivo
.ts. Revisa los nombres, ya que salen de los nombres de tus claves.
Deducir tipos a partir de un ejemplo JSON
Pasar de JSON a TypeScript a mano es tedioso. Los tipos de TypeScript describen la forma de los datos, y una respuesta JSON ya contiene una forma: cada clave, el tipo de valor que tiene y cómo se anidan los objetos. Un convertidor recorre el ejemplo y escribe esa forma como declaraciones, para que no tengas que teclear cuarenta campos antes de llamar a una API con confianza.
El paso más importante es qué hacer con los arreglos. Se lee cada elemento de un arreglo de objetos y sus formas se combinan: una clave presente en todos los elementos sigue siendo obligatoria, una clave presente solo en algunos pasa a ser opcional y los valores de tipos distintos se convierten en una unión. Por eso un ejemplo con varios registros da tipos mucho mejores que uno con un solo registro. Un valor null se trata distinto de una clave ausente, porque significan cosas diferentes para el código que lee el campo.
Los tipos deducidos son un punto de partida, no un contrato. No pueden saber que una cadena siempre es uno de tres valores, que un número es en realidad un ID entero ni que un campo presente en todos tus ejemplos puede desaparecer en producción. Lee el resultado, cambia el nombre de lo que haya quedado raro y ajusta los tipos que importan.
Consejos
- Comprueba primero que tu ejemplo esté bien formado con Formatear y validar JSON, que señala el carácter exacto de un error de sintaxis.
- ¿Trabajas con una configuración en YAML? Conviértela con Convertir YAML a JSON y pega aquí el resultado.
- ¿Necesitas ver el contenido de un token antes de tiparlo? Decodifícalo con el Decodificador de JWT.
Preguntas frecuentes
¿Cómo decide que un campo es opcional?
Cuando tienes un arreglo de objetos, los objetos se combinan en una sola forma. Una clave que aparece en algunos elementos pero no en todos recibe un ?. Una clave que está presente pero vale null en algunos elementos no es opcional; se convierte en T | null. Desactiva la detección de opcionales si prefieres que todas las claves sean obligatorias.
¿Cómo se nombran los tipos anidados?
Cada objeto anidado recibe el nombre de su clave en PascalCase, así que billing_address pasa a ser BillingAddress. En un arreglo, el tipo de los elementos pierde la "s" final cuando la clave tiene más de 3 letras y no termina en ss, us o is: users da User, mientras que address da AddressItem. Si dos formas distintas quieren el mismo nombre, la segunda se numera, y obtienes User y User2. Estas reglas siguen el plural del inglés.
¿Qué pasa con los objetos que tienen la misma forma?
Comparten una sola declaración. Si billing y shipping contienen ambos { street, city }, obtienes una sola interfaz, con el nombre del primer lugar donde aparece. Dos objetos con las mismas claves pero con tipos de valor distintos son formas diferentes y reciben nombres separados.
¿Por qué un arreglo vacío se tipa como unknown[]?
Un arreglo vacío no contiene ejemplos, así que no se puede deducir nada sobre sus elementos. unknown[] es la respuesta honesta; cámbialo a mano cuando sepas el tipo de los elementos. Un arreglo que mezcla valores se convierte en una unión, como (string | number)[].
¿Puede el resultado diferir de la API real?
Sí. Un ejemplo solo muestra los valores que contiene. Un campo que siempre está en tu ejemplo pero a veces falta en producción será obligatorio aquí, y una cadena tipo enum será un simple string. Para una validación estricta, usa un esquema; para empezar rápido, usa este resultado y ajústalo.
¿Se sube mi JSON a algún servidor?
No. Nada de lo que pegas se envía a ningún lado; la conversión se ejecuta en tu navegador y puedes desconectarte de la red después de que cargue la página.