Wie generiere ich TypeScript-Interfaces aus einer JSON-API-Antwort?

Fügen Sie das JSON in die JSON-Eingabe ein und die TypeScript-Ausgabe aktualisiert sich. Legen Sie den Namen des Root-Interface fest und verwenden Sie dann Kopieren oder .ts herunterladen. Verschachtelte Objekte werden zu separaten benannten Interfaces.

Kann ich anstelle eines Interface einen Typalias erhalten?

Ja. Wählen Sie in den Optionen Typalias anstelle von Interface und die Ausgabe wechselt zwischen export type und export interface. Der Root-Name ist standardmäßig Root, wenn das Feld leer ist.

Warum wird Ungültiges JSON angezeigt?

Die Eingabe wird mit JSON.parse geprüft, muss also striktes JSON sein: Schlüssel in doppelten Anführungszeichen, keine abschließenden Kommas, keine Kommentare. Die Meldung des Parsers wird nach Ungültiges JSON angezeigt, damit Sie das Problem finden können.

Wie geht das Tool mit Arrays um, die unterschiedliche Objektformen haben?

Bei Arrays von Objekten werden die Schlüssel aller Elemente zusammengeführt. Schlüssel, die in einigen Elementen fehlen, werden optional, und ein Schlüssel mit unterschiedlichen Werttypen erhält einen Union-Typ, verbunden mit |.

Wird mein JSON an einen Server gesendet?

Nein. Parsing und Typgenerierung verwenden reines JavaScript in Ihrem Browser, ohne externe Bibliothek. .ts herunterladen erstellt die Datei lokal und benennt sie nach dem Root-Interface.

Ist es wirklich kostenlos?

Ja. Jedes Tool ist kostenlos nutzbar, ohne Konto und ohne Kreditkarte. Die Verarbeitung läuft auf Ihrem Gerät statt auf unseren Servern – genau deshalb können wir den Dienst kostenlos betreiben.

Funktioniert es auf Mobilgeräten?

Ja. Es läuft in aktuellen mobilen Browsern unter iOS und Android, ohne dass etwas installiert werden muss.

📝

JSON zu TypeScript Konverter – kostenlos

Generieren Sie TypeScript-Interfaces oder Type-Aliases aus beliebigen JSON-Objekten oder Arrays. JSON einfügen und sofort verwendbare TypeScript-Typen erhalten.

Läuft in Ihrem BrowserKein Konto, keine Pop-upsKeine Anmeldung erforderlichFür immer kostenlos

Funktioniert nach dem Laden offline

Name des Root-Interface

JSON-Eingabe

TypeScript-Ausgabe

export interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
  score: number;
  tags: string[];
  address?: null;
}

export interface Root {
  user: User;
  createdAt: string;
  version: number;
}

Häufige Anwendungen

TypeScript-Typen aus API-Antworten generierenFügen Sie eine API-JSON-Antwort ein und generieren Sie sofort TypeScript-Schnittstellen, um Ihren Frontend-Code typensicher zu machen.
TypeScript-Typen für Konfigurations- und EinstellungsobjekteGenerieren Sie TypeScript-Schnittstellen aus JSON-Konfigurationsdateien, um Ihren Anwendungseinstellungen Typensicherheit hinzuzufügen.
TypeScript-Typen aus Datensätzen generierenKonvertieren Sie JSON-exportierte Datensätze oder ORM-Abfrageergebnisse in TypeScript-Schnittstellen für die Datenschicht-Typisierung.
Mock-Daten und Test-Fixtures typenGenerieren Sie TypeScript-Schnittstellen aus JSON-Mock-Daten und Test-Fixtures, um Ihre Unit-Tests und Storybook-Stories zu typen.
Drittanbieter-API-Antworten typenGenerieren Sie TypeScript-Schnittstellen aus Drittanbieter-API-Antworten, bei denen offizielle Typen fehlen oder veraltet sind.

So funktioniert es

Dieses Tool nutzt einen selbst geschriebenen rekursiven Typinferenz-Algorithmus ohne externe Bibliotheken – JSON.parse zum Prüfen und Parsen der Eingabe, dann eine eigene Traversierung, die jeden Wert im JSON-Baum durchläuft und TypeScript-interface- oder type-Deklarationen direkt im Browser ausgibt. Nichts wird an einen Server gesendet.

1
JSON wird geparst und geprüft
Ihre Eingabe wird an JSON.parse übergeben. Schlägt das fehl, erscheint der genaue Parse-Fehler sofort unter der Eingabe. Ein erfolgreiches Parsen ergibt einen typisierten Wertebaum, der die restliche Umwandlung steuert.
2
Rekursive Typinferenz
Eine rekursive Funktion getType durchläuft jeden Knoten: Primitive werden zu string, number, boolean oder null; Objekte erzeugen ein neues benanntes Interface; bei Arrays aus Objekten werden die Schlüssel aller Elemente zusammengeführt, sodass nur in manchen Einträgen vorhandene Schlüssel optional werden und widersprüchliche Werttypen mit | verbunden werden.
3
Kollisionssichere Interface-Benennung
Jedes verschachtelte Objekt erhält einen PascalCase-Namen, der aus seinem JSON-Schlüssel abgeleitet wird (snake_case, kebab-case und Leerzeichen werden normalisiert). Würden zwei strukturell unterschiedliche Objekte denselben Namen erhalten, wird ein Zahlensuffix angehängt (Data, Data2, …), statt die frühere Definition stillschweigend zu überschreiben.
4
Ausgabe wird angezeigt und ist herunterladbar
Verschachtelte Interfaces werden zuerst ausgegeben, dann der Wurzeltyp – je nach Auswahl als export interface oder export type formatiert. Das Ergebnis kann in die Zwischenablage kopiert oder als .ts-Datei heruntergeladen werden – alles mit einem Standard-Blob und ohne Serverumweg.

JSON zu TypeScript Konverter – kostenlos

Häufige Anwendungen

So funktioniert es

Ähnliche Tools

JSON Schema zu Formular

Tippgeschwindigkeitstest (WPM)

CSS-clamp()-Generator

Häufige Fragen