Kategorien

OpenAPI-zu-TypeScript-Generator

Konvertiert OpenAPI- oder Swagger-Spezifikationen in JSON/YAML in TypeScript-API-Typen, Anfrageparameter und Antwortmodelle mit konfigurierbarem Ausgabeformat und Namensstil

Beispielergebnisse

1 Beispiele

Flache API-Typen aus OpenAPI erzeugen

Wandelt ein kleines OpenAPI-Dokument in exportierte TypeScript-Schnittstellen und Endpunktvertraege um

export interface User {
  id: string;
  name: string;
}

export interface GetUserPath {
  id: string;
}

export type GetUserResponse = { status: "200"; data: User };

Eingabeparameter anzeigen

{ "specInput": "openapi: 3.0.0\ninfo:\n title: User API\n version: 1.0.0\npaths:\n /users/{id}:\n get:\n operationId: getUser\n parameters:\n - in: path\n name: id\n required: true\n schema:\n type: string\n responses:\n \"200\":\n description: ok\n content:\n application/json:\n schema:\n $ref: \"#/components/schemas/User\"\ncomponents:\n schemas:\n User:\n type: object\n required: [id, name]\n properties:\n id:\n type: string\n name:\n type: string", "sourceFormat": "yaml", "outputFormat": "flat", "namingStyle": "pascal", "declarationStyle": "interface", "namespaceName": "Api", "includeOperationTypes": true, "includeDescriptions": true }

OpenAPI-Spezifikation *

Quellformat

Ausgabeformat

Namensstil

Deklarationsstil

Namespace-Name

Operationstypen einbeziehen

Beschreibungen einbeziehen

Wichtige Fakten

Kategorie: Development
Eingabetypen: textarea, select, text, checkbox
Ausgabetyp: text
Sample-Abdeckung: 4
API verfügbar: Yes

Überblick

Der OpenAPI-zu-TypeScript-Generator wandelt Ihre API-Spezifikationen in präzise TypeScript-Typdefinitionen um, um die Typsicherheit in Ihrem Frontend- oder Backend-Code zu gewährleisten.

Wann verwenden

•Bei der Synchronisierung von API-Änderungen mit Ihrem TypeScript-Frontend-Code.
•Wenn Sie manuelle Typdefinitionen durch automatisch generierte Schnittstellen ersetzen möchten.
•Zur schnellen Erstellung von Request- und Response-Modellen basierend auf einer bestehenden Swagger- oder OpenAPI-Datei.

So funktioniert es

•Fügen Sie Ihre OpenAPI- oder Swagger-Spezifikation (JSON oder YAML) in das Eingabefeld ein.
•Wählen Sie das gewünschte Ausgabeformat, den Namensstil (z. B. PascalCase) und den Deklarationsstil (Interface oder Typalias) aus.
•Passen Sie Optionen wie die Einbeziehung von Operationstypen oder Beschreibungen an.
•Generieren Sie den Code und kopieren Sie die fertigen TypeScript-Typen direkt in Ihr Projekt.

Anwendungsfälle

Automatisierte Erstellung von API-Client-Typen für React- oder Vue-Anwendungen.

Standardisierung von Datenschnittstellen zwischen verschiedenen Microservices.

Schnelles Prototyping von API-Verträgen basierend auf einer zentralen Spezifikationsdatei.

Beispiele

1. Flache API-Typen aus OpenAPI erzeugen

Hintergrund: Ein Entwickler möchte für eine Benutzer-API konsistente TypeScript-Interfaces erstellen, ohne diese manuell schreiben zu müssen.
Problem: Manuelle Typdefinitionen sind fehleranfällig und bei API-Änderungen schwer zu warten.
Verwendung: OpenAPI-YAML in das Eingabefeld kopieren, 'Flache Exporte' und 'Interface' als Stil wählen.
Beispielkonfiguration: sourceFormat: yaml, outputFormat: flat, namingStyle: pascal, declarationStyle: interface
Ergebnis: Saubere TypeScript-Interfaces für User-Objekte und API-Endpunkte werden sofort einsatzbereit generiert.

Mit Samples testen

json, yaml

OpenAPI/Swagger Beispiele

Umfassende API-Dokumentationsbeispiele mit OpenAPI 3.0 und Swagger-Spezifikationen für RESTful-Services

title token openapi

json, yaml

Web TypeScript Datenserialisierungsbeispiele

Web TypeScript Datenserialisierungsbeispiele einschließlich JSON-Serialisierung/Deserialisierung und XML-Parsing

title token typescript

json

OpenAPI/Swagger Beispiele

OpenAPI/Swagger Spezifikationsbeispiele für REST API-Dokumentation und Vertragsdefinition

title token openapi

yaml

Web TypeScript Dateioperationsbeispiele

Web TypeScript Dateioperationsbeispiele einschließlich Textdatei-Lesen/Schreiben, Datei-Kopieren/Verschieben, Verzeichnisdurchlauf und Dateivalidierung

title token typescript

sample

FAQ

Welche Formate werden unterstützt?

Das Tool unterstützt OpenAPI- und Swagger-Spezifikationen im JSON- oder YAML-Format.

Kann ich zwischen Interfaces und Typalias wählen?

Ja, Sie können in den Einstellungen zwischen 'Interface' und 'Typalias' für die Deklaration wählen.

Wie werden die Namen der generierten Typen formatiert?

Sie können zwischen PascalCase, camelCase oder dem Originalnamen aus der Spezifikation wählen.

Werden Beschreibungen aus der Spezifikation übernommen?

Ja, wenn die Option 'Beschreibungen einbeziehen' aktiviert ist, werden Kommentare aus der Spezifikation in den generierten Code übernommen.

Was ist der Unterschied zwischen flachen Exporten und Namespace-Hülle?

Flache Exporte geben alle Typen direkt aus, während die Namespace-Hülle alle Typen unter einem definierten Namespace gruppiert.

API-Dokumentation

Request-Endpunkt

POST /de/api/tools/openapi-to-typescript-generator

Request-Parameter

Parameter-Name	Typ	Erforderlich	Beschreibung
specInput	textarea	Ja	-
sourceFormat	select	Nein	-
outputFormat	select	Nein	-
namingStyle	select	Nein	-
declarationStyle	select	Nein	-
namespaceName	text	Nein	-
includeOperationTypes	checkbox	Nein	-
includeDescriptions	checkbox	Nein	-

Antwortformat

{
  "result": "Processed text content",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}

Text: Text

MCP-Dokumentation

Fügen Sie dieses Tool zu Ihrer MCP-Server-Konfiguration hinzu:

{
  "mcpServers": {
    "elysiatools-openapi-to-typescript-generator": {
      "name": "openapi-to-typescript-generator",
      "description": "Konvertiert OpenAPI- oder Swagger-Spezifikationen in JSON/YAML in TypeScript-API-Typen, Anfrageparameter und Antwortmodelle mit konfigurierbarem Ausgabeformat und Namensstil",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=openapi-to-typescript-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Sie können mehrere Tools verketten, z.B.: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, maximal 20 Tools.

Wenn Sie auf Probleme stoßen, kontaktieren Sie uns bitte bei [email protected]