Estás sin conexión. Las herramientas que ya abriste siguen funcionando.
JSON a TypeScript
Pega un JSON y obtén interfaces o alias de tipo de TypeScript. Los campos opcionales llevan signo de interrogación, los valores null añaden | null y las listas con valores mezclados se convierten en tipos unión.
Gratis y privado. Todo funciona en tu navegador y no se sube nada.
Informar de un problema
Cómo funciona
Pega tu JSONPega una respuesta de tu API o abre un archivo .json. Con Ejemplo ves un caso de muestra.
Ajusta las opcionesIndica el nombre del tipo principal y las opciones de este lenguaje. El código se actualiza mientras escribes.
Copia o descargaCopia el código en tu proyecto o descárgalo como archivo.
Interfaces para respuestas de API
Tipar la respuesta de una llamada fetch es una de las tareas más comunes en un proyecto de TypeScript. Pega aquí una respuesta real y obtendrás una interfaz por cada forma de objeto, con los objetos anidados y las listas tipados hasta el último nivel. Las claves que no son identificadores válidos, como "Created At" o "123abc", se escriben entre comillas para que el tipo siga coincidiendo con los datos.
Elige interface o type, si todos los tipos se exportan y si los campos son de solo lectura. Las fechas se quedan como string, porque JSON no tiene tipo de fecha y JSON.parse devuelve textos. Un campo que es null en todos los elementos pasa a ser unknown, así el compilador te obliga a comprobarlo antes de usarlo.
Preguntas frecuentes
¿Interface o type, cuál elijo?
Los dos sirven para describir objetos. Las interfaces se pueden extender y combinar, los alias de tipo también pueden describir uniones. Muchos equipos usan interfaces para los modelos de API, por eso es la opción por defecto.
¿Se sube mi JSON a algún sitio?
No. Los tipos se generan en tu navegador. Las respuestas de API con datos de clientes o claves nunca salen de tu dispositivo.
¿Cómo se detectan los campos opcionales?
Si el JSON contiene una lista de objetos, se comparan todos. Un campo que falta en al menos un objeto se marca como opcional. Con un solo objeto, todos los campos se tratan como obligatorios.
¿Qué pasa con los campos que siempre son null?
Con el ejemplo no se puede saber su tipo, así que el campo recibe un tipo general como unknown, object, Any o JsonElement. Añade un ejemplo en el que el campo tenga un valor para obtener un tipo preciso.
¿Por qué mi 1.0 aparece como número decimal?
La herramienta mira cómo está escrito el número. 1.0 o 2.5 pasan a ser double o float, 1 pasa a ser un entero. Si un campo es entero en unos elementos y decimal en otros, se usa el tipo decimal.
¿Puedo usar el resultado en código de producción?
Sí, el código compila tal cual en las configuraciones habituales. Revisa nombres y tipos antes de hacer commit, porque un ejemplo nunca puede mostrar todos los valores posibles.
¿Funciona sin conexión?
Sí. Después de abrir la página una vez, sigue funcionando sin conexión a internet.
Suelta el archivo para ver qué puedes hacer con él