JSON a TypeScript gratis
Convierte cualquier JSON en interfaces TypeScript limpias con tipos anidados y campos opcionales.
Cargando herramienta…
Cómo crear interfaces TypeScript a partir del ejemplo JSON
Generar interfaces de borrador a partir de un ejemplo de JSON y un nombre de tipo raíz. Revisión inferida tipos anidados y opcionales antes de usarlos.
- Representante de Pegado, JSON válido.
- Establecer un nombre de interfaz raíz.
- Revisa las interfaces generadas y los tipos anidados.
- Copiar o descargar el TypeScript y refinarlo en su esquema real.
Al generar tipos ahorra tiempo
Los desarrolladores de Front-end a menudo reciben una respuesta de API de muestra antes de que exista un esquema formal. Pegar esa muestra aquí produce un primer borrador de interfaces en segundos, en lugar de escribir cada campo a mano.
También es útil cuando se trabaja con archivos de configuración, cargas útiles de Webhook o datos exportados. Ver la estructura como tipos hace que sea más fácil detectar nidos, matrices y campos que pueden ser nulos. Puede copiar el resultado o descargarlo como un archivo types.ts.
Los equipos también utilizan interfaces generadas durante revisiones de código o migraciones. Comparando tipos de una carga útil vieja y una nueva hace que los campos añadidos, eliminados y renombrados sean fáciles de ver, antes de que cualquier código que dependa de ellos rompa la producción.
Un ejemplo práctico
Establecer el nombre de la raíz a Ordenar y pegar este JSON: {"ordenId": 5012, "pagado": falso, "cupón": nulo, "artículos": [{"sku": "A-1", "qty": 2}, {"sku": "B-7", "qty": 1, "nota": "regalo"}], "cliente": {"nombre": "Lee", "vip": trueá.
La herramienta produce tres interfaces. El pedido tiene "ordenId": número, "pagado": booleano, "coupon"?: null, "ítems": Order_items[] y "cliente": Orden_cliente. Orden_cliente tiene "nombre": cadena y "vip": booleano. Order_items tiene "sku": cadena y "qty": número.
Observe que el campo de notas del segundo elemento no aparece. La interfaz de elementos se construye a partir del primer elemento de matriz, por lo que los campos que sólo aparecen en elementos posteriores no se incluyen. ¿Añadirías nota?: cuerda a mano.
Cómo se infieren los tipos
Cuerdas, números y booleans mapean directamente a la cadena, número y boolean. Cada objeto anidado se convierte en tu propia interfaz exportada, nombrada uniendo el nombre padre y la clave con un subrayado, con la primera letra mayúscula. Los caracteres que no son letras, dígitos o subrayados se sustituyen por subrayados.
Un campo cuyo valor es nulo se escribe como nulo y se marca opcionalmente con un signo de interrogación. Una matriz vacía se vuelve desconocida[]. Un array no vacío toma el tipo de su primer elemento, y si cualquier elemento posterior tiene un tipo diferente, el array entero se vuelve desconocido[].
Los nombres de propiedades se escriben en comillas dobles, por lo que las claves con espacios o guiones permanecen válidas TypeScript. La interfaz raíz es listada primero, seguida por las anidadas, y el anidar más profundo que 40 niveles muestra un error.
Errores comunes a evitar
No confíe en un solo registro. Elige una muestra donde cada campo se rellena, o fusiona campos de varios registros, por lo que los tipos generados están completos.
Reemplazar los tipos null con los reales. Un campo tecleado como null generalmente contiene una cadena, número u objeto en otras ocasiones, así que cámbielo a algo como cadena | null.
Asegúrate de que la entrada es estricta JSON. El rastreo de comas, comillas simples y comentarios causa un error de análisis, y el mensaje aparece debajo del cuadro de entrada hasta que el JSON es válido. Tratar la salida como ayuda de tiempo de compilación solamente. Las interfaces describen lo que esperas, pero no comprueban los datos en tiempo de ejecución, por lo que añade validación cuando entra entrada no confiable en tu aplicación.
Consejos útiles y limitaciones
- Un ejemplo no puede revelar todos los campos o valores posibles.
- Revisa la inferencia anulable y opcional en lugar de tratarlo como un contrato API.
- Renombrar interfaces generadas como Order_items a nombres más claros como OrderItem después de pegarlas en tu proyecto.
- Los arrays mixtos se vuelven desconocidos[], así que defina un tipo de unión usted mismo si el array realmente tiene varias formas.
Preguntas frecuentes
¿Las interfaces validan JSON entrante en tiempo de ejecución?
No. Son declaraciones de tiempo de compilación; la validación de tiempo de ejecución requiere una comprobación separada.
¿Por qué se crean interfaces anidadas?
Representan estructuras de objetos anidados como tipos reutilizables.
¿Pueden inferirse los campos perdidos?
No. Suministra ejemplos representativos y añade posibilidades ausentes tú mismo.
¿Cómo se nombran las interfaces anidadas?
La herramienta une el nombre de la interfaz padre y la clave de la propiedad con un subrayado, como Order_clustor para un objeto cliente dentro de Order.
¿Se pueden usar nombres de propiedades con espacios o guiones?
Sí. Cada nombre de propiedad está envuelto en comillas dobles, por lo que las teclas como "nombre" siguen siendo válidas.
¿Qué pasa con una matriz vacía?
Se vuelve desconocido[] porque no hay ningún elemento desde el que inferir un tipo, así que reemplázalo con el tipo de elemento correcto.
Su entrada se procesa en tu navegador sin una cuenta ToolWorld Online. Copia o descarga cualquier cosa que quieras guardar antes de salir de la página.
Lee nuestra política de privacidad · Acerca de ToolWorld Online