Utilo

OpenAPI zu Mock & TypeScript

Fügen Sie eine OpenAPI-3- oder Swagger-2-Spezifikation (JSON oder YAML) ein und erhalten Sie realistische Mock-Antworten, TypeScript-Interfaces und einen typisierten fetch-Client für jeden Endpunkt – komplett im Browser.

Was dieses OpenAPI-Tool tut

Frontend-Arbeit beginnt oft, bevor das Backend fertig ist, und das Schreiben von Handtypen für eine API, die bereits eine Spezifikation hat, ist vergeudeter Aufwand. Wenn Sie ein OpenAPI 3.x oder Swagger 2.0 Dokument in JSON oder YAML einfügen, generiert dieses Tool drei Dinge: realistische Mock-Antworten für jede Operation, TypeScript-Typen für alle Schemata und einen kleinen eingegebenen Fetch-Client mit einer Funktion pro Endpunkt. Alles wird in Ihrem Browser generiert, also werden private oder interne API-Spezifikationen nie hochgeladen.

So verwenden Sie es

  1. Fügen Sie Ihre Spezifikationen ein oder laden Sie die Datei hoch. JSON und YAML werden akzeptiert.
  2. Die Endpunktliste zeigt jede Operation mit ihrer Methode und ihrem Pfad.
  3. Öffnen Sie die Registerkarte Mock Data und wählen Sie eine Operation aus, um eine Probenreaktion zu sehen, die aus Schemabeispielen, Formaten und Enums besteht.
  4. Wechseln Sie auf TS-Typen für Schnittstellen, die von components/schemas (oder definitions in Swagger 2) generiert wurden.
  5. Wechseln Sie zu TS-Client für einen einsatzbereiten Client und kopieren Sie ihn in Ihr Projekt.

Wie Späne erzeugt werden

  • example- und examples-Werte aus der Spezifikation gewinnen immer.
  • enum wählt den ersten Wert; default wird respektiert.
  • Stringformate erzeugen plausible Werte: email, uuid, date-time, uri, ipv4 und so weiter.
  • Eigentumsnamen geben Hinweise, so dass name, price oder createdAt realistisch aussehen.
  • $ref, allOf, oneOf und anyOf werden gelöst; rekursive Referenzen werden sicher abgeschnitten.
  • Mocks sind deterministisch pro Operation, also ändern sie sich nicht bei jedem Nachwechsel.

Mit dem generierten Client

Der Client exportiert eine BASE_URL-Konstante und eine Async-Funktion pro Operation, benannt nach ihrem operationId (oder Methode und Pfad, wenn fehlt), mit eingegebenen Pfadparametern, Abfrageparametern und Anforderungskörper, und gibt die eingegebene Antwort zurück. Es hängt nur von fetch ab, also funktioniert es in Browsern, Node 18+, Deno und Bun.

Häufige Fragen

Welche Spezifikationsversionen werden unterstützt?

OpenAPI 3.0 und 3.1, sowie Swagger 2.0. Externe $ref-Dateien, die auf andere Dateien oder URLs verweisen, werden nicht abgerufen; bündeln Sie zuerst Ihre Spezifikation (z. B. mit redocly bundle).

Kann ich hier einen Schein-Server ausführen?

Dieses Tool zeigt simulierte Nutzlasten, die Sie in MSW Handler, Fixtures oder Storybook kopieren können. Für einen laufenden Scheinserver können Tools wie Prism die gleiche Spezifikation verwenden.

Wie verglichen wir das mit openapi-typescript?

Für Produktionscodes in einer Bauleitung sind dedizierte CLIs großartig. Dieses Werkzeug ist für schnelle, nicht installierte Erkundungs- und Prototyping-Aktivitäten.

Ist meine Spezifikation hochgeladen?
  • Nein, nicht wirklich. Parsing und Generierung sind vollständig lokal.

Ja. Die gesamte Verarbeitung erfolgt direkt in deinem Browser mit JavaScript, Web Workern und Web-APIs. Nichts, was du eingibst, einfügst oder hochlädst, wird an unsere Server gesendet.

Diese Seite wurde automatisch aus dem Englischen übersetzt. Wenn dir ein Fehler auffällt, sag uns bitte Bescheid.