Zum Hauptinhalt springen
Entwicklung Mobil

OpenAPI TypeScript: Erstellen von Typen, Clients und Validierung

Erhalten Sie einen Überblick über die OpenAPI TypeScript-Generierung von Anfang bis Ende. Erstellen Sie Typen, verbinden Sie Clients, validieren Sie bei Laufzeit und schicken Sie sicher von CI aus.

OpenAPI TypeScript: Erstellen von Typen, Clients und Validierung

Sie können normalerweise erkennen, wenn ein API-Pipeline anfängt, der Mannschaft zu lügen. Ein Schema ändert sich, die generierten Typen aktualisieren sich ohne Beschwerden, der Pull-Request geht grün, und dann liest jemand in der Frontend immer noch die alte Antwortform, weil der Wrapper den Fehler weggeworfen hat. Das ist das OpenAPI TypeScript-Problem, nicht, ob ein Generator Interfaces ausstoßen kann.

Die nützlichere Frage ist schwieriger. Was soll der Vertrag zwischen Schema, Transport und Validierung sein, und welche Teile sollten schnell in der Buildzeit scheitern, anstatt in der Laufzeit zu lecken? Sobald Sie das Rahmenwerk OpenAPI TypeScript als Wahlmöglichkeit für den Pipeline wird die Abwägung deutlicher und die Werkzeuge geben auf, die ganze Lösung zu sein.

Inhaltsverzeichnis

Warum generierte Typen nicht dasselbe sind wie ein sicheres API

Ein Teammitglied mergt einen PR, der eine optionale Antwortfeld hinzufügt. Das generierte Datei aktualisiert sich sauber, die Diff sieht langweilig aus und jeder geht weiter. Dann liest die Frontend weiterhin eine ältere Form durch eine handschriftliche Wrapper, die 'temporär' mit as anyund die Produktion beginnt, wie wenn der Vertrag nie geändert wurde.

Das ist der Haken mit generierten Typen. TypeScript kann nur den code schützen, der die generierten Typen konsumiertund nur, wenn die Transportlayer nicht den Vertrag wieder löscht. Die OpenAPI-Seite gibt Ihnen ein Schema, nicht eine Garantie, dass jeder Aufrufer es respektiert. Die Diskussion um die Verständigung von API-Verbindungen ist hier nützlich, weil es die Konversation von einer einzelnen Werkzeug ablenkt und sich auf die Verbindung von Systemen konzentriert.

Wo die Misserfolge verborgen sind

Die häufigsten Unterbrechungen sind langweilig, nicht exotisch. Schema drift tritt auf, wenn sich die OpenAPI-Spezifikation und die im Betrieb befindliche Dienst nicht mehr übereinstimmen. Teilweise Abdeckung erscheint, wenn eine Spezifikation nur den glücklichen Weg modelliert, während die App auf ungedokumentierte Randfälle angewiesen ist. Händisch erstellte Wrapper sind oft dort, wo sich die Typen schwächen, insbesondere, wenn jemand schnell vorankommen möchte und any oder eine lose Antwort cast verwendet.

Praktische Regel: Wenn der Wrapper lügen kann, kann der Generator euch nicht helfen.

Es gibt auch eine Laufzeitlücke. TypeScript-Typen verschwinden nach der Kompilierung, sodass sie nicht auf fehlerhaftes JSON reagieren können, das über die Verbindung kommt. Der Netzwerkverkehr kümmert sich nicht darum, was Ihr Editor angenommen hat, und das ist der Grund, warum ein generierter Client nur eine Schicht in einer sicheren API Pipeline ist.

Die breitere operative Frage ist die Sicherheit und die Vertragsdisziplin und nicht nur die Entwicklerkomfort. Wenn Sie einen strukturierten Überblick darüber haben, wie API Verträge in einen größeren App-Lifecycle passen, ist diese interne Anleitung zu API Sicherheitsstandards für die App-Store-Konformität API security standards for app store compliance Die reife Art, über

openapi typescript zu denken, ist diese. Es gibt Ihnen eine strenge Schema-zu-Typen-Brücke, die ausgezeichnet ist, aber es validiert keine Anforderungen, erzwingt keine Laufzeit-Payload-Form oder stoppt einen schlampigen Wrapper, der alles untergräbt. Der Generator ist der leichteste 20 Prozent. Der Rest ist die Pipeline-Design, und das ist, wo Teams entweder Vertrauen gewinnen oder falsche Zuversicht anhäufen. Typen aus einer OpenAPI-Spezifik generieren

Bild von https://openapi-ts.dev

Die leichte nützlichste Konfiguration ist normalerweise die, die realen Repo-Chaoten überlebt. Halten Sie die OpenAPI-Spezifik im gleichen Repository, generieren Sie ein verpflichtetes Typ-File und machen Sie den Drift in CI sichtbar, anstatt auf jemanden zu zählen, der sich an einen Refresh-Schritt erinnert. Ein Befehl wie

gibt Ihnen ein deterministisches Ausgabedatei, die Reviewer wie jede andere Quelländerstellung untersuchen können. npx openapi-typescript ./openapi.yaml -o ./src/types/api.d.ts Die Flags, die wirklich zählen

Die Flags, die wirklich zählen

Die -o Die Ausgabeflagge ist wichtig, weil sie das generierte Artefakt explizit macht. --immutable ist nützlich, wenn Sie die generierten Typen so haben möchten, dass sie die readonly-Intention im Ausgang bewahren und --alphabetize stabil halten, wenn sich die Schema-Reihenfolge ändert, ohne dass es einen semantischen Unterschied macht. --enum ist wichtig, wenn Ihr Team in der generierten Oberfläche Enums bevorzugt, anstatt von Unions.

Die Dokumentation des Projekts ist klar über den Umfang, es ist ein Typgeneratorund nicht ein Client- Runtime oder eine Anforderungs-Schicht, und diese Einschränkung hilft, wenn Sie ein leichtgewichtiges, type-first-Setup wollen. Sein Repository zeigt auch die Wartungsmethode hinter der Werkzeug, die Teil davon ist, warum offene Quellcode-Tools in der Produktion halten können, wenn die Dokumentation und die Releases aktiv bleiben, wie in der Fall für die offene Quellcode-Wartungbesprochen wurde. Ein praktischer Lesetipp zu dieser Haltung ist das Projekt-Repository und die GitHub Dokumentation und CLI.

Die Erzeugung von Wire in package.json so die Kommandozeile lebt neben den anderen Build-Skripten, dann wird sie ausgeführt, sobald sich die Spezifikation ändert. In der CI wird das File neu generiert und es wird fehlschlagen, wenn git diff zeigt, dass sich die Richtlinien verschoben haben. Das wandelt Änderungen an Verträgen in sichtbare Überprüfungsarbeit um, anstatt sie als stumme Laufzeitrisiken zu behandeln.

Die Schema-Seite ist genauso wichtig wie die Kommandozeile. Das Projekt empfiehlt compilerOptions.noUncheckedIndexedAccess so additionalProperties werden T | undefined, was sicherere Indexierung an Aufrufstellen erzwingt. Es empfiehlt auch, oneOf von selbst zu verwenden, anstatt sie mit zusätzlicher Komposition zu mischen, und $defs am Wurzelort zu behalten, wenn die Platzierung unsicher ist, weil falsch platzierte Definitionen aus der generierten Ausgabe verschwinden können. Ein weiterer Detail spart Zeit später openapi-typescript werden nie anyerzeugen, also wird die fehlende Schema-Detail frühzeitig an die Oberfläche gebracht, anstatt sie unter permissiven Typen zu verstecken.

Halten Sie die Spezifikation explizit, oder der Generator wird die Ambiguität treu wieder an Sie zurückgeben.

Das Workflow, das langlebig ist, ist einfach. Legen Sie die Spezifikation unter Versionskontrolle, generieren Sie sie bei jedem Build neu, committen Sie das generierte File und lassen Sie den Typ-Checker vor dem Merge einer Mismatch protestieren. Das gibt Ihnen eine stabile Vertragsgrenze für den Rest der Pipeline.

Wahl zwischen reinen Typen, vollständigen Clients und keinem Codegenerierung

Muster Zeitpunkt der Erstellung Ausgabedateien Bundle-Größe Beste Passform
Reine Typen mit dünner Wrapper Rasch Wenig Niedrig Teams, die Kontrolle und kleine Laufzeitoberfläche wollen
Vollklienten-Codegenerierung Langsamer Viele Höher Teams, die eine schnelle Übergabe und automatisierte Operationen bevorzugen
Keine Anfragen zur Codegenerierung Rasch Keine oder minimale Niedrig Einzelprojekte, die handgeschriebenen Transportlogik bevorzugen

Die Wahl ist nicht wirklich 'welches Tool gewinnt'. Es ist vielmehr welche Pipeline-Form Ihren Repository, Ihr Team und wie viel Churn der API sieht. In einer 2025-Benchmark um ein großes OpenAPI-Spezifikum von etwa 75.000 Zeilen, 2 MB und etwa 1.200 Operationen, openapi-typescript erzeugte Ausgabe in etwa 1,5 Sekunden im Durchschnitt, verglichen mit etwa 8,0 Sekunden für @hey-api/openapi-ts, 5,5 Sekunden für Orval, und 18,1 Sekunden für Kubb, wobei auch ein einzelnes Ausgabedatei gegenüber 16 für hey-api, 2,719 für Orvalund 3,877 für Kubb (Details zur Benchmark).

Reine Typen bevorzugen die Kontrolle

A pure-types setup pairs well with a handwritten request layer because you can keep the runtime tiny and the API surface boring. That matters in bundler-sensitive front ends and in apps where one team owns both the spec and the consumer. If you need a reminder that developer experience is not just syntax sugar, the Entwicklererfahrungswinkel leichter zu beurteilen, wenn Ihr Client code kurz, offensichtlich und überprüfbar ist.

Vollklienten bevorzugen die Geschwindigkeit der Handübertragung

openapi-generator, hey-api, Orvalund Kubb alle versuchen, mehr als Typen zu tun. Das kann hilfreich sein, wenn Sie Methoden für Anforderungen, Modelle und Rohre gemeinsam generieren möchten, insbesondere in einer großen Handübertragung zwischen Backend- und Frontend-Teams. Der Preis ist offensichtlich in der Benchmark oben, mehr generierte Dateien, mehr Laufzeitoberfläche und mehr Raum für Baustellen bei der Spezifikationswachstum.

Keine Codegenerierung bevorzugt lokale Refaktoren

Typisierte Anforderungsbaustellen und fetch Wrapper funktionieren gut, wenn ein Codebase beide Enden der Form besitzt und die API-Änderungen eng koordiniert sind. Der Nachteil ist die Pflege-discipline. Je mehr Teams und Repositories zwischen Produzent und Verbraucher sitzen, desto wahrscheinlicher driftet eine handgeschriebene Anfrage-Schicht, es sei denn, Sie setzen aggressive Vertrags-Tests ein.

Das Kernentscheidungspunkt ist nicht ideologisch. Wenn Ihr Bundle-Budget knapp ist, sind reine Typen attraktiv. Wenn Ihr Team maximalen Aufbau und die Ausgabe absorbieren kann, reduzieren vollständige Clients die Einrichtungszeit. Wenn Sie minimal bewegliche Teile und die Vertragsnähe halten wollen, können no-codegen-Anfrage-Builder die richtige interne Handelsstrategie sein.

Wiring eines dünnen, getypten Clients um Fetch oder Axios

Eine Diagramm, das einen Typisierten Client Wrapper-Prozess mit generierten TypeScript API-Definitionen für Web-Anforderungen illustriert.

Eine dünne Hülle ist, wo der Generator aufhört und Ihre Anwendung code beginnt. Die Hülle sollte eine Funktion pro Operation offenlegen, die getippte Parameter und Abfrageobjekte akzeptieren und den Aufruf ohne versucht zu sein, clever zu sein, an eine fetch oder eine injizierte axios Instanz weiterleiten. In den meisten Produktionskonfigurationen bleibt diese Schicht um 30–60 Zeilen

herum, da die generierten Typen bereits den größten Teil der Form tragen.

  • Hier ist das mentale Modell, das hält: Path-Parameter bleiben getippt, also /users/{id} werden nicht ohne id.
  • Query-Objekte bleiben typisiert so werden optional Filter nicht in eine Brühe aus Zeichen umgewandelt.
  • Antwortkörper bleiben typisiert so kann die Verarbeitung von code auf die enge Form vertrauen, die sie erwartet.

Ein solcher Wrapper ist absichtlich langweilig. Er sollte keine Wiederholungen, Transformationen oder Auth-Politiken erfinden, wenn diese an anderer Stelle liegen. Er sollte die Anfrage von einem typisierten Vorgang in den Transportlayer verschieben und dann den typisierten Ergebnis zurückgeben.

Halte den Wrapper langweilig und abhängigkeitsarm, oder jede zukünftige Änderung der Codegenerierung wird sich in deiner App auswirken.

Die häufige Fehlhandlung besteht darin, as any als die generierten Typen nicht mit dem alten Wrapper-Signatur übereinstimmen. Das kauft einen grünen Build und ein fragiles App. Es versteckt auch die sehr Vertragsbruch, den Sie mit dem Generator offenlegen wollten.

Für Teams, die Axios bevorzugen, ist das Muster gleich, nur die Transportimplementierung ändert sich. Für Teams, die eine einfachere Browser-Seite code bevorzugen, fetch ist oft ausreichend. Der wichtige Punkt ist, dass die Anfragefunktion den generierten Pfadtyp akzeptiert und einen typisierten Antwortkörper zurückgibt, nicht eine lose geformte Objekt, das später massiert wird.

Wenn Sie diesen Schnittstelle gut nutzen, openapi typescript gibt Ihnen eine klare Arbeitsteilung. Das Schema lebt im Spezifikation, der Transport lebt im Wrapper, und die App sieht typisierte Operationen anstatt ad-hoc-Anfragen code.

Hinzufügen von Laufzeitvalidierung mit zod, ajv oder io-ts

TypeScript-Typen verschwinden bei Laufzeit, und das Netzwerk kümmert sich nicht um die Zuversicht Ihres Editors. Deshalb ist die sichere Methode nicht "Typen generieren und hoffen", sondern "Typen generieren, dann validieren Sie an der Grenze, an der unvertrauenswürdige Daten in die App eintreten". Das generierte Schema bleibt die Quelle der Wahrheit, und Validierungsbibliotheken wie zod, ajv, und io-ts handeln die Grenzprüfungen, die Zeit-Überprüfungen nicht können.

Validieren, wo die Daten eintreten

Für React-Apps ist die Grenze normalerweise direkt nach der Anfrage aufgelöst und bevor der Payload in den Zustand eingeht. Für Server ist es, bevor der Payload in eine Datenbank geschrieben wird oder an eine Geschäftsregel weitergegeben wird. Die Regel ist einfach, die Validierung halten Sie nahe der Grenze und streuen Sie keine manuellen Prüfungen durch Features code.

A zod eine Form kann die generierte Antwortform ohne sie zu ersetzen spiegeln:

import { z } from "zod";

const WeatherForecastSchema = z.object({
  date: z.string(),
  temperatureC: z.number(),
  summary: z.string().nullable(),
  temperatureF: z.number().optional(),
});

Das Beispiel validiert die Felder, die das Schema als optional markiert, und es hält die Laufzeitprüfung mit dem von dem Generator produzierten ausgerichtet. ajv ist eine starke Wahl, wenn Sie eine hohe Durchsatz-JSON-Schema-Validierung auf dem Server wollen, während io-ts passt noch für Teams, die bereits in der fp-ts Kompositionsart leben.

Der große Fehler ist, zu spät zu validieren. Wenn der Payload in Ihr App zuerst kommt, ist das Typsystem bereits umgangen und der Fehler hat einen Unterschlupf. Ein kurzer Leitfaden zu Unit-Tests für JavaScript passt gut zu diesem Mindset, weil sowohl Unit-Tests als auch Grenzvalidierung am besten funktionieren, wenn sie frühzeitig schlechte Annahmen aufdecken.

Die saubere Schichtung ist vorhersehbar. OpenAPI TypeScript generiert den Vertrag, der Validator überprüft den Laufzeit-Payload, und Ihre App code sieht nur Daten, die beide Schritte überstanden haben. Das ist ein viel besseres Grenzbereich als das Vertrauen in einen statischen Typ, der einen unvertrauten Antwort polizieren soll.

Putting Generation, Validation, und Contract Tests in CI

Bild von https://github.com

Ein Pipeline, die anhält, verwandelt den Vertrag in eine Tür, nicht in eine Empfehlung. Regenerieren Sie die Typen, scheitern Sie bei der Drift, führen Sie tsc --noEmitund üben Sie die API Form gegen einen Mock oder ein Vertragswerkzeug aus, bevor Sie miteinander fusionieren. Wenn Sie die Generator-Version in package.jsonZwei Ingenieure können nicht versehentlich unterschiedliche Ausgaben aus derselben Spezifikation erzeugen.

Eine einfache GitHub Actions-Form

Eine praktische Workflow-Abfolge sieht wie folgt aus:

  1. Ziehen Sie die Spezifikation aus dem Repository oder der generierten Quelle.
  2. Regenerieren Sie die Typen.
  3. Beenden Sie den Job, wenn git diff zeigt Änderungen.
  4. Ausführen tsc --noEmit.
  5. Überprüfen Sie einen Vertragstest gegen einen Mock-Server wie Prism oder einen Spectral-gestützten Prüfzertifikat.

Der Hauptunterschied zwischen Vertragstests und Snapshot-Tests besteht im Umfang. Snapshots erzählen oft, dass der Datei geändert wurde. Vertragstests erzählen Ihnen, ob die Form noch wie die Spezifikation sagt, verhält.

Eine Mock-Server ist besonders nützlich, wenn Backend- und Frontend-Arbeit durch Zeit- oder Teamgrenzen getrennt sind. Er bietet dem Verbraucher code eine vorhersehbare API Oberfläche, während der tatsächliche Vertrag noch überprüft wird, anstatt ein festeres Fix-Objekt. Die Anleitung zur kontinuierlichen Integration ist eine nützliche Referenz, wenn Ihr Team noch eine saubere, wiederholbare CI-Basis benötigt.

Das Fixieren der Generator-Version vermeidet eine der schlimmsten Fehler in Code-Generierung-Pipelines, nämlich unsichtbare Ausgabeschwankungen. Wenn ein Entwickler die Generator-Version lokal aktualisiert und ein anderer nicht, kann das generierte Datei ein Quelle von zufälligem Lärm statt Signal werden. Die CI sollte das unmöglich machen.

Das Ergebnis ist ein Pipeline, in der Schemaänderungen, Typgenerierung, Compilerprüfungen und Vertragsprüfungen sich gegenseitig verstärken. Das ist, was die Workflow ehrlich macht.

Halbwegs Wartbare Pipelines, Leistung und ein Abschlusscheckliste

Eine Checkliste, die vier wichtige Schritte für die Wartung einer OpenAPI-Pipeline für Softwareentwicklungsprojekte zeigt.

Die Pipelines, die überleben, sind diejenigen mit langweiliger Governance. Versionieren Sie die Spezifikation, überprüfen Sie Schemaänderungen wie code, fixieren Sie den Generator und dokumentieren Sie, wie sich Bruchänderungen genehmigen lassen. Wenn der Prozess unscharf ist, werden die Leute daran herumgehen, und dann werden die generierten Typen Dekoration anstatt Enforcement.

Einige Leistungsknöpfe haben tatsächlich Auswirkungen

Die inkrementelle Generierung hilft in Monorepos, in denen die Spezifikation oft ändert, aber nur ein Paket sie konsumiert. tsc --incremental Kann wiederholte Compilerarbeit reduzieren und die Deaktivierung von Ausgabeflags, die Sie in Produktionsbuilds nicht benötigen, hält die generierte Oberfläche kleiner. In der Praxis ist der größte Gewinn immer noch sozial, nicht technisch, weil eine vorhersehbare Pipeline häufiger als eine clevere ausgeführt wird.

Die folgende Checkliste ist diejenige, die Sie sich merken sollten:

  • Version-Fixierung: Sperren Sie die openapi-typescript Version in Deutsch package.json Damit sich die Ausgabe nicht zwischen den Maschinen verschiebt.
  • Schema-Übersicht: Behandeln Sie Änderungen an der Spezifikation als überprüfbare Vertragsänderungen und nicht als Hauswirtschaft.
  • Drift-Detektion: Regenerieren Sie in CI und schließen Sie aufgrund von Differenzen aus.
  • Edge-Validierung: Analysieren Sie unvertrauene Payloads, bevor sie das Anwendungsstatus oder die Persistenz erreichen.
  • Vertragsprüfung: Laufen Sie einen von einem Mock unterstützten Check aus, der beweist, dass der Verbraucher code noch immer mit dem Schema übereinstimmt.
  • Policy für Bruchteilsänderungen: Schreiben Sie auf, wer die Änderungen an der Form genehmigt und wie die Kunden benachrichtigt werden.

A Pipeline, der diese Schalter enthält, erzeugt nicht nur Typen, sondern macht das Vertragsverhältnis sichtbar. Diese Sichtbarkeit ist es, was den Teams verhindert, ein Datei zu vertrauen, die nur scheinbar sicher aussieht.

Wenn Sie Capacitor oder Electron-Apps verschicken und Ihr Updatepipeline mit derselben Disziplin verhalten soll, gibt Capgo Ihnen einen praktischen Weg, JavaScript, CSS, Kopien, Konfigurationen und Asset-Fixes schnell ohne auf die App-Store-Überprüfung zu warten. Besuchen Sie Capgo Besuchen Sie __CAPGO_KEEP_0__

Live-Updates für Capacitor-Apps

Wenn ein Web-Schicht-Bug live ist, schicken Sie die Reparatur über Capgo anstatt Tage zu warten, bis die App-Store-Zulassung genehmigt ist. Die Benutzer erhalten die Aktualisierung im Hintergrund, während native Änderungen im normalen Review-Prozess bleiben.

Unterstützung durch Martin

Loslegen

Neueste aus unserem Blog

Capgo gibt Ihnen die besten Einblicke, die Sie benötigen, um eine wirklich professionelle mobile App zu erstellen.