Zum Hauptinhalt springen
Entwicklung Mobil

OpenAPI TypeScript: Erstellen Sie Typen, Clients und Validierung

Erfahren Sie, wie die OpenAPI-Generierung für TypeScript von Anfang bis Ende funktioniert. Erstellen Sie Typen, verbinden Sie Clients, überprüfen Sie bei Laufzeit und versenden Sie sicher von CI.

OpenAPI TypeScript: Erstellen Sie Typen, Clients und Validierung

Man kann normalerweise den Moment erkennen, an dem ein API Pipeline der Mannschaft beginnt, zu lügen. Ein Schema ändert sich, die generierten Typen aktualisieren sich ohne Beschwerden, der PR geht grün, und dann liest jemand im Frontend weiterhin die alte Antwortform, weil der Wrapper den Fehler wegnimmt. Das ist das OpenAPI TypeScript Problem, nicht, ob ein Generator Interfaces ausstoßen kann.

The useful question is harder. What contract do you want between schema, transport, and validation, and which parts should fail fast in build time instead of leaking into runtime? Once you frame OpenAPI TypeScript als Pipeline-Option werden die Vor- und Nachteile deutlicher, und die Tools geben vor, die gesamte Lösung zu sein.

Inhaltsverzeichnis

Warum generierte Typen nicht dasselbe sind wie ein sicheres API

Ein Kollege mergt einen PR, der eine optionale Antwortfeld hinzufügt. Das generierte Datei aktualisiert sich sauber, der Diff sieht langweilig aus und jeder geht weiter. Dann liest die Frontend-Implementierung weiterhin eine ältere Form durch eine manuell geschriebene Wrapper, der "temporär" mit as anyund die Produktion beginnt, als ob der Vertrag nie geändert wurde.

Das ist der Haken mit generierten Typen. TypeScript kann nur den code schützen, der die generierten Typen konsumiert, and only if the transport layer doesn’t erase the contract again. The OpenAPI side gives you a schema, not a guarantee that every caller respects it. The Diskussion um die Verständigung von API-Verbindungen Es ist hier nützlich, weil es die Konversation von einem einzelnen Tool weg und hin zu den Verbindungen zwischen Systemen lenkt.

Wo die Fehler verborgen sind

Die häufigsten Bruchstellen sind langweilig, nicht exotisch. Schema-Drift Der OpenAPI-Spezifikation und der bereitgestellten Dienst passen nicht mehr zueinander. Teilweise Abdeckung erscheint, wenn ein Spezifikation nur den glücklichen Weg modelliert, während die App auf ungedokumentierte Randfälle angewiesen ist. Manuelle Wrapper sind oft dort, wo sich die Typen schwächen, insbesondere, wenn jemand schnell vorankommen möchte und "Cloudflare" verwendet. any oder eine lose Antwort cast.

Praktische Regel: Wenn der Wrapper lügen kann, kann der Generator dich nicht retten.

Es gibt auch einen Laufzeitunterschied. TypeScript-Typen verschwinden nach der Kompilierung, sodass sie nicht auf fehlerhaftes JSON reagieren können, das über das Netzwerk kommt. Das Netzwerk kümmert sich nicht darum, was dein 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, nicht nur die Entwicklerkomfort. Wenn du einen strukturierten Überblick über, wie API Verträge in einem größeren App-Lifecycle passen, ist diese interne Anleitung zu den API Sicherheitsstandards für die App-Store-Kompliance API security standards for app store compliance Die reife Art, über

Die reife Art, darüber nachzudenken OpenAPI für TypeScript is this. It gives you a strict schema-to-types bridge, which is excellent, but it doesn’t validate requests, enforce runtime payload shape, or stop a sloppy wrapper from undermining everything. The generator is the easy 20 percent. The rest is pipeline design, and that’s where teams either gain trust or accumulate false confidence.

Typen von TypeScript generieren aus einer OpenAPI-Spezifikation

Screenshot von https://openapi-ts.dev

Die leichte aber nützliche Konfiguration ist meistens die, die bei realen Repository-Änderungen überlebt. Halten Sie die OpenAPI-Spezifikation im selben Repository, generieren Sie ein abgelegtes Typ-File und machen Sie den Drift in CI sichtbar, anstatt auf jemanden zu vertrauen, der sich an einen Refresh-Schritt erinnert. npx openapi-typescript ./openapi.yaml -o ./src/types/api.d.ts gibt Ihnen eine deterministische Ausgabedatei, die Rezensenten wie jede andere Quelländerstellung untersuchen können.

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 wollen, dass die generierten Typen die readonly-Intention im Ausgang bewahren und --alphabetize stabilisiert die Diffs, wenn die Schema-Reihenfolge ohne semantische Bedeutung ändert. --enum ist wichtig, wenn Ihr Team Vorzüge in der generierten Oberfläche bevorzugt, anstatt Vereinbarungen.

Die Projekt-Dokumentation ist klar über den Umfang, es ist ein Typ-Generator, kein Client- Runtime oder Request-Schicht, und diese Einschränkung hilft, wenn Sie eine leichte, type-first-Konfiguration wollen. Sein Repository zeigt auch das Wartungsmodell hinter der Werkzeug, was Teil davon ist, warum offene Quellcode-Werkzeuge in der Produktion halten können, wenn die Dokumentation und Releases aktiv bleiben, wie in der Fall für die offene Quellcode-Wartung. Ein praktischer Lesetipp zu dieser Haltung ist das Projekt’s GitHub-Repository und CLI-Dokumentation.

Wire-Generierung in package.json so lebt der Befehl neben den restlichen Build-Skripten, führen Sie ihn dann immer dann aus, wenn sich die Spezifikation ändert. In CI regenerieren Sie das File und scheitern, wenn git diff zeigt einen Drift. Das wandelt Änderungen an Verträgen in sichtbares Überprüfungsarbeiten um, anstatt stillschweigende Laufzeitrisiken.

Die Schema-Seite ist genauso wichtig wie die Befehlszeile. Das Projekt empfiehlt compilerOptions.noUncheckedIndexedAccess so additionalProperties werden T | undefined, was sicherere Indexierung an Aufrufstellen erzwingt. Es empfiehlt auch, oneOf alleine zu verwenden anstatt es mit zusätzlicher Komposition zu mischen, und $defs am Wurzelort zu behalten, wenn die Platzierung unsicher ist, weil verfehlte Definitionen aus der generierten Ausgabe verschwinden können. Ein weiterer Detail spart Zeit später, openapi-typescript wird nie erzeugt any, so fehlende Schema-Detail wird frühzeitig angezeigt anstatt unter permissiven Typen verborgen.

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

Der Workflow, der hält, ist unkompliziert. Legen Sie die Spezifikation unter Versionskontrolle, regenerieren Sie bei der Build-Phase, 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.

Wählen Sie zwischen reinen Typen, vollständigen Clients und keinem Code-Generator

Muster Buildzeit Ausgabedateien Paketgewicht Beste Passform
Reine Typen mit dünner Wrapper Rasch Wenig Niedrig Teams, die Kontrolle und eine kleine Laufzeitoberfläche wollen
Vollklienten-Codierung Langsamer Viele Höher Teams, die eine schnelle Übergabe und automatisierte Operationen wollen
Keine Codierung von Anfragebauen Schnell Keine oder minimale Niedrig Apps mit einer einzigen Codebasis, die eine handschriftliche Transportlogik bevorzugen

Die Wahl ist nicht wirklich "welches Werkzeug gewinnt". Es ist vielmehr welche Pipeline-Form sich an Ihre Repo, 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, im Vergleich mit etwa 8,0 Sekunden für @hey-api/openapi-ts, 5,5 Sekunden für Orvalund 18,1 Sekunden für Kubb, während auch eine einzelne Ausgabedatei gegenübergestellt wird 16 für hey-api, 2,719 für Orval, und 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 ist es einfacher zu beurteilen, wenn Ihr Client code kurz, offensichtlich und überprüfbar ist.

Vollklienten bevorzugen die Geschwindigkeit der Übergabe

openapi-generator, hey-api, Orval, und Kubb Alle versuchen, mehr als nur Typen zu tun. Das kann hilfreich sein, wenn Sie Anforderungsmethoden, Modelle und Verbindungen gemeinsam generieren möchten, insbesondere bei einer großen Übergabe zwischen Backend- und Frontend-Teams. Der Preis ist offensichtlich in der oben gezeigten Benchmark, mehr generierte Dateien, mehr Laufzeitoberfläche und mehr Raum für Baufriction, wenn die Spezifikation wächst.

Kein Codegenerator bevorzugt lokale Refaktoren

Geschriebene Anforderungsbaustellen und fetch Wrapper funktionieren gut, wenn ein Codebase beide Enden der Form und die API Änderungen eng koordiniert sind. Der Nachteil ist die Wartungsdiscipline. Je mehr Teams und Repositories zwischen Produzent und Verbraucher sitzen, desto wahrscheinlicher driftet eine manuell geschriebene Anforderungsschicht, es sei denn, Sie setzen aggressive Vertragsprüfungen 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 möchte, reduzieren vollständige Clients die Einrichtungszeit. Wenn Sie minimal bewegliche Teile und die Vertragsnähe halten möchten, können keine-Codegenerator-Anforderungsbaustellen die richtige interne Handelsstrategie sein.

Ein Thin-Typisiertes Client-Netzwerk um Fetch oder Axios herum aufbauen

A diagram illustrating a Typed Client Wrapper process using generated TypeScript API definitions for web requests.

A thin wrapper is where the generator stops and your application code starts. The wrapper should expose one function per operation, accept typed params and query objects, and forward the call to fetch oder injiziert axios Instanz ohne zu versuchen, clever zu sein. In der Regel bleibt diese Schicht in Produktionsumgebungen erhalten. 30–60 Zeilen weil die generierten Typen bereits den größten Teil der Form aufweisen.

Das folgende mentale Modell hält sich:

  • Path-Parameter bleiben typisiert also /users/{id} werden nicht ohne einen id.
  • Query-Objekte bleiben typisiert also optional Filter werden nicht in String-Suppe umgewandelt.
  • Antwortkörper bleiben typisiert so kann die code vertrauensvoll auf die enge Formatik zählen.

Ein solcher Wrapper ist absichtlich langweilig. Er sollte keine Wiederholungen, Transformationen oder Auth-Politiken erfinden, wenn diese an anderer Stelle gehören. Er sollte den Anfragevorgang von einem typisierten Operation in den Transportlayer verschieben und dann den typisierten Ergebnis wieder nach oben weitergeben.

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

Die häufige Fehlhandlung besteht darin, Mismatches mit as any Wenn die generierten Typen nicht mit der alten Wrapper-Signatur übereinstimmen. Das kauft einem eine grüne Baustelle und eine fragile App. Es versteckt auch die sehr Vertragsverletzung, die du von dem Generator offenlegen wolltest.

Für Teams, die Axios bevorzugen, ist das Muster das gleiche, nur ändert sich die Transportimplementierung. Für Teams, die eine einfachere Browser-Seite code fetch ist oft ausreichend. Der wichtige Punkt ist, dass die Anfragefunktion den generierten Pfadtyp akzeptiert und einen getypten Antwortwert zurückgibt, nicht ein locker geformtes Objekt, das später massiert wird.

Wenn du diesen Faden gut nutzt, OpenAPI TypeScript gibt dir eine saubere Aufteilung der Arbeit. Die Schema lebt im Spezifikation, der Transport lebt im Wrapper, und die App sieht getypte Operationen anstatt ad-hoc-Anfragen code.

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

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

Validieren, wo die Daten eintreten

Für React-Apps ist die Grenze normalerweise direkt nach der Anfrageauflösung 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 nahe der Grenze zu halten und nicht durch Features code zu streuen.

A zod Die Form kann die Form der generierten Antwort widerspiegeln, ohne sie zu ersetzen:

import { z } from "zod";

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

Das Beispiel überprüft die vom Schema als optional markierten Felder und hält die Laufzeitprüfung mit dem vom Generator erzeugten Ergebnis im Einklang. ajv ist eine starke Wahl, wenn Sie eine hohe Durchsatzfähigkeit für die JSON-Schema-Validierung auf dem Server wünschen, während io-ts noch Teams passt, die bereits in der fp-ts Art der Komposition leben.

Der große Fehler ist, zu spät zu validieren. Wenn der Payload in Ihr Anwendungsprogramm eindringt, ist das Typensystem bereits umgangen worden und der Fehler hat einen Unterschlupf gefunden. Ein kurzer Leitfaden zu Einheiten-Tests für JavaScript passt gut zu diesem Denkansatz, da sowohl Einheitstests als auch Grenzwertvalidierung 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 Anwendung code sieht nur Daten, die beide Schritte überstanden haben. Das ist ein viel besseres Grenzbereich als das Vertrauen in eine statische Typisierung, die einen unvertrauenswürdigen Antwort polizieren soll.

Erstellen Sie Generierung, Validierung und Vertragsprüfungen in CI

Bild aus https://github.com

Ein Pipeline, der Bestand hat, verwandelt den Vertrag in eine Schranke, nicht in eine Empfehlung. Regeneriere Typen, versage bei Drift, ausführe tsc --noEmit, und üben Sie die API-Form gegen einen Mock- oder Vertragswerkzeug vor der Merge aus. Wenn Sie die Generator-Version festlegen package.json, können zwei Ingenieure nicht versehentlich unterschiedliche Ausgaben aus demselben Spezifikationsdokument erzeugen.

Ein einfaches GitHub-Actions-Formular

Ein praktischer Workflow sieht so aus:

  1. Ziehe die Spezifikation aus dem Repository oder der generierten Quelle.
  2. Regenerieren Sie die Typen.
  3. Beachten Sie, wenn git diff zeigt Änderungen.
  4. Run tsc --noEmit.
  5. Ein Vertrags-Test gegen einen Mock-Server wie Prism oder einen Spectral-gestützten Prüfzettel durchführen.

Der Hauptunterschied zwischen Vertragsprüfungen und Snapshot-Tests besteht im Umfang. Snapshot-Tests erzählen Ihnen oft, dass ein Datei geändert wurde. Vertragsprüfungen sagen Ihnen, ob die Form noch so verhält, wie die Spezifikation es sagt.

Ein 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 die tatsächliche Vertragsprüfung stattfindet und nicht eine festgelegte Fixtur. kontinuierliche Integration Einrichtungsanleitung ein nützliches Referenzwerk, wenn Ihr Team noch einen sauberen, wiederholbaren CI-Baseline benötigt.

Pinning the generator version avoids one of the nastiest failures in codegen pipelines, invisible output skew. If one developer upgrades the generator locally and another doesn’t, the generated file can become a source of random noise instead of signal. CI should make that impossible.

The result is a pipeline where schema changes, type generation, compiler checks, and contract tests all reinforce one another. That’s what makes the workflow honest.

Wartungsfreundliche Pipelines, Leistung und ein letzter Kontrollcheck

Ein Checkliste mit vier wichtigen Schritten zur Wartung einer OpenAPI TypeScript Pipeline für Softwareentwicklungsprojekte.

Die Pipelines, die überleben, sind diejenigen mit unterhaltsamer Governance. Versionieren Sie die Spezifikation, überprüfen Sie Änderungen an der Schema 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 zu Dekorationen und nicht zu einer Einhaltung.

Einige Leistungsregler haben tatsächlich Auswirkungen

Die inkrementelle Erzeugung hilft in Monorepos, in denen die Spezifikation oft ändert, aber nur ein Paket sie verwendet. tsc --incremental Sie können wiederholte Compilerarbeiten streichen und die Ausgabe von Flags, die Sie in Produktionsbuilds nicht benötigen, deaktivieren, um die generierte Oberfläche kleiner zu halten. In der Praxis ist der größte Gewinn immer noch sozial und nicht technisch, weil ein vorhersehbarer Pipeline häufiger als ein cleverer ausgeführt wird.

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

  • Versionierungspinning: Sperren Sie die openapi-typescript Version in package.json so dass die Ausgabe nicht zwischen Maschinen schwankt.
  • Schema-Überprüfung: Treat spec changes as reviewable contract changes, not housekeeping.
  • Drift-Detektion: Regenerieren in CI und auf Diff fehlschlagen.
  • Edge-Validierung: Unvertraute Payloads vorher parsen, bevor sie das Anwendungsstate oder die Persistenz erreichen.
  • Vertragsprüfung: Ein Mock-basierter Check durchführen, der beweist, dass der Verbraucher code noch mit dem Schema übereinstimmt.
  • Änderungspolitik: Beschreiben, wer die Änderungen der Form genehmigt und wie die Kunden benachrichtigt werden.

Ein Pipeline, die diese Schranken enthält, generiert nicht nur Typen, sondern macht das Vertragsverhältnis sichtbar. Diese Sichtbarkeit ist es, was den Teams verhindert, ein File zu vertrauen, das nur sicher aussieht.

Wenn Sie Capacitor oder Electron-Apps verschicken und Ihr Update-Pipeline so diszipliniert verhalten möchte, wie Capgo Ihnen einen praktischen Weg gibt, JavaScript, CSS, Copy, Konfiguration und Asset-Fixes schnell ohne auf die App-Store-Überprüfung zu warten. Besuchen Sie Capgo zum sehen, wie seine signierten Pakete, die Rückschlagsicherung und die Freigabekontrollen in einen Release-Prozess passen, der schnell sein muss, ohne die Kontrolle zu verlieren.

Live-Updates für Capacitor-Apps

Bei einem lebenden Web-Schadensfall 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.

Menschliche Unterstützung von Martin

Jetzt loslegen

Neuestes aus unserem Blog

Capgo bietet Ihnen die besten Einblicke, die Sie benötigen, um eine wirklich professionelle Mobil-App zu erstellen.