Utilo

OpenAPI a mock y TypeScript

Pega una especificación OpenAPI 3 o Swagger 2 (JSON o YAML) para generar respuestas mock realistas, interfaces TypeScript y un cliente fetch tipado para cada endpoint, todo en tu navegador.

Lo que hace esta herramienta OpenAPI

El trabajo de frontend a menudo comienza antes de que el backend esté listo, y escribir tipos a mano para una API que ya tiene una especificación es un esfuerzo perdido. Pegar un ** OpenAPI 3.x ** o ** Swagger 2.0 ** documento en JSON o YAML y esta herramienta genera tres cosas: realistas ** mock respuestas ** para cada operación, ** tipos de TypeScript ** para todos los esquemas, y un pequeño tipo de ** fetch cliente ** con una función por punto final. Todo se genera en su navegador, por lo que las especificaciones de API privadas o internas nunca se cargan.

Cómo usarlo

  1. Pegue su especificación o cargue el archivo. Se aceptan tanto JSON como YAML.
  2. La lista de puntos finales muestra cada operación con su método y ruta.
  3. Abre la pestaña ** datos simulados ** y selecciona una operación para ver una respuesta de muestra, construida a partir de ejemplos de esquemas, formatos y enum.
  4. Cambiar a los tipos TS para las interfaces generadas desde components/schemas (o definitions en Swagger 2).
  5. Cambiar a **TS cliente ** para un cliente listo para usar y copiarlo en su proyecto.

Cómo se generan las burlas

  • Los valores example y examples de la especificación siempre ganan.
  • enum elige el primer valor; default es respetado.
  • Los formatos de cadena producen valores plausibles: email, uuid, date-time, uri, ipv4 y así sucesivamente.
  • Los nombres de las propiedades dan pistas, por lo que name, price o createdAt se ven realistas.
  • $ref, allOf, oneOf y anyOf se resuelven; las referencias recursivas se cortan de forma segura.
  • Las simulaciones son deterministas por operación, por lo que no cambian en cada actualización.

Usando el cliente generado

El cliente exporta una constante BASE_URL y una función asincrónica por operación, nombrada después de su operationId (o método y ruta cuando falta), con parámetros de ruta, parámetros de consulta y cuerpo de solicitud, devolviendo la respuesta escrita. Solo depende de fetch, así que funciona en navegadores, Node 18+, Deno y Bun.

Preguntas frecuentes

¿Qué versiones de especificaciones son compatibles?

OpenAPI 3.0 y 3.1, además de Swagger 2.0. Los $ref externos que apuntan a otros archivos o URL no se buscan; agrupar su especificación primero (por ejemplo, con redocly bundle).

¿Puedo ejecutar un servidor simulado con esto?

Esta herramienta muestra cargas útiles simuladas que puede copiar en los manipuladores de MSW, accesorios o Storybook. Para un servidor simulado, herramientas como Prism pueden usar la misma especificación.

¿Cómo se compara esto con openapi-typescript?

Para el código de producción en una línea de construcción, los CLI dedicados son geniales. Esta herramienta es para la exploración rápida y sin instalación de prototipos.

¿Se ha subido mi especificación?
  • No, no es así. El análisis y la generación son completamente locales.

Sí. Todo el procesamiento se realiza directamente en tu navegador mediante JavaScript, Web Workers y APIs web. Nada de lo que escribes, pegas o subes se envía a nuestros servidores.

Esta página se tradujo automáticamente del inglés. Si encuentras un error, avísanos.