Fertige TypeScript-Types aus einer OpenAPI-Spec generieren
Du hast eine OpenAPI-Spec für deine API und brauchst TypeScript-Types dazu. Jetzt. Ohne jede Route und jede Form von Hand zu schreiben, ohne einen Parameter zu übersehen, ohne zu vergessen, dass dieses eine paths-Feld optional ist.
YAML oder JSON links pasten, eine saubere `paths`-Type kriegen (URL zu Methode zu Request- und Response-Form) plus typisierte Schema-Components rechts. Der Generator folgt \$ref-Pointern, geht jede operationId durch und emittet ein einzelnes selbstgenügsames `.ts`-File, das du in dein Projekt droppen kannst.
Drei schnelle Optionen: nur Schemas (den `paths`-Block weglassen, wenn du nur die Datenformen willst), JSDoc aus Beschreibungen (damit deine IDE die API-Doku beim Hover zeigt) und echte `enum`-Deklarationen statt String-Literal-Unions, wenn du den Stil bevorzugst.
So nutzt du das Tool
- Deine OpenAPI-Spec links pasten. YAML oder JSON, Version 3.0 oder 3.1. Der Default-Sample ist die Petstore-Minimal-Spec, damit du den Generator gleich in Aktion siehst.
- Format wählen: lass es auf Auto, das Tool erkennt YAML oder JSON am ersten Zeichen (`{` heißt JSON, alles andere YAML). Explizit erzwingen, wenn deine Spec ungewöhnlich ist.
- "Nur Schema-Components" anschalten, wenn du nur die Datenformen willst (den `components.schemas`-Block) ohne das `paths`-Mapping. Nützlich, wenn du den HTTP-Client selbst von Hand schreibst.
- "JSDoc aus Beschreibungen ergänzen" anschalten, um deine `description`- und `title`-Felder als JSDoc-Kommentare über jeder generierten Property zu halten. Deine IDE zeigt die API-Doku beim Hover.
- "Enums statt String-Unions" für Felder mit `enum: [available, pending, sold]`. An: `enum Status { available, pending, sold }`. Aus: `"available" | "pending" | "sold"` (Default, freundlicher für Tree-Shaking).
- `Copy` drücken, um das Ergebnis im Clipboard zu haben, oder `Download`, um es als `openapi.ts` zu speichern. In dein Projekt pasten, `paths`- und `components`-Typen importieren, fertig.
- Output regeneriert automatisch während du tippst (mit halber Sekunde Pause). Kein Build-Button nötig.
Wann das nützlich ist
Fünf konkrete Situationen, in denen das dir Stunden Tipperei spart:
- Onboarding auf eine bestehende API. Backend-Team hat eine OpenAPI-Spec publiziert. Hier pasten, jede Request- und Response-Form in Sekunden typisiert. Ein typisiertes `fetch`-Wrapper drumherum bauen, und deine IDE autocompletet jeden Endpoint.
- Typen mit dem Backend synchron halten. Die Spec ist der Vertrag. Lass das Tool laufen, wenn das Backend einen neuen Endpoint shippt, paste das neue `openapi.ts` in dein Projekt, der TypeScript-Compiler markiert jede Stelle, die ein Update braucht.
- Typisiertes SDK aus einer Public-API generieren. Stripe, GitHub, Linear und die meisten modernen SaaS-Anbieter publizieren eine OpenAPI-Spec. Hier reinpacken und du hast einen typisierten Client in einer Minute, ohne `any` irgendwo.
- Test-Fixture aus einer echten Form schreiben. Du brauchst einen Mock-`Pet` für einen Test. Typen generieren, im Editor hovern, die IDE zeigt jedes Pflichtfeld. Kein Raten mehr, was die API wirklich liefert.
- Von Swagger 2.0 / OpenAPI 3.0 zu 3.1 migrieren. Beide Versionen werden unterstützt. Alte Spec pasten, regenerieren, Diff vergleichen: jetzt siehst du exakt, welche Felder `nullable`-Semantik bekommen haben oder zu einer Tagged-Union gewandert sind.
Um die echten Endpoints zu testen, sobald die Typen da sind, kann der HTTP-Request-Tester jede Methode, und der Mock-API-Generator springt für das echte Backend ein, während du das Frontend baust.