JSON-zu-TypeScript-Typkonverter
Fügen Sie ein JSON-Objekt (oder ein JSON-Array) ein, um automatisch die entsprechenden TypeScript-Interface-/Type-Definitionen zu erzeugen.
TypeScript-Typen aus JSON erzeugen
Das Erste, was man beim Verarbeiten einer API-Antwort in TypeScript braucht, ist eine Typdefinition. Ein `interface` von Hand zu schreiben, während man auf tief verschachteltes JSON blickt, ist mühsam – und **genau die Art Arbeit, bei der eine Eigenschaft übersehen oder ein Typ verwechselt wird.** Fügen Sie das JSON hier ein, und dieses Werkzeug erzeugt das passende `interface` oder `type`.
Der Generator leitet die TypeScript-Typen aus den JavaScript-Typen der Werte ab. **Verschachtelte Objekte werden als eigene Interfaces herausgezogen**, und Arrays übernehmen den Typ ihrer Elemente als `T[]`. Den Namen des Wurzeltyps können Sie frei wählen, sodass sich die Ausgabe unmittelbar in Ihr Projekt einfügen lässt. **Da die Ableitung allein auf der eingefügten Probe beruht, müssen Sie Eigenschaften, die entfallen können, und Felder, die null sein können, anschließend selbst ergänzen** – mit `?` oder einer Union. Alles läuft in Ihrem Browser.
So erzeugen Sie die Typen
- Fügen Sie das JSON ein Tragen Sie eine Beispielantwort unverändert ein. Ein Objekt wie ein Array funktionieren beide.
- Benennen Sie den Wurzeltyp Das wird der Name des obersten Interface. Der Vorgabewert genügt, wenn Sie keine Vorliebe haben.
- Sehen Sie sich die Ausgabe an Verschachtelte Objekte erscheinen als eigene Interfaces herausgezogen.
- Ergänzen Sie die optionalen Felder selbst **Was in der Probe fehlt, lässt sich nicht ableiten.** Setzen Sie `?` und `| null`, wo sie hingehören.
- Kopieren Sie es in Ihr Projekt Das Ergebnis lässt sich unmittelbar in eine `.ts`-Datei einfügen.
Tipps für die Nutzung
- Wenn alle Elemente eines Arrays Objekte sind, werden ihre Schlüssel zu einem einzigen Interface zusammengeführt. Schlüssel, die in manchen Elementen fehlen, werden automatisch als optional (`?`) markiert.
- Der Name des Root-Typs lautet standardmäßig "Root", kann aber beliebig geändert werden (z. B. `User`, `ApiResponse`). Die Interface-Namen verschachtelter Objekte werden automatisch aus dem jeweiligen Property-Namen erzeugt.
- Fügen Sie einfach eine Beispiel-JSON-Antwort Ihrer API ein, um schnell einen Entwurf der Typdefinitionen für Ihre Frontend-Implementierung zu erhalten.
- Das generierte Ergebnis ist lediglich ein aus der Struktur abgeleiteter Entwurf. Es wird empfohlen, es manuell mit der tatsächlichen API-Spezifikation abzugleichen (nullable Felder, Pflichtfelder usw.), bevor Sie es verwenden.
Wofür sich das eignet
Eine fremde Schnittstelle typisieren
Auch wenn eine Schnittstelle keine Typdefinitionen mitliefert, gibt eine Beispielantwort einen Ausgangspunkt.
Eine bestehende JSON-Konfiguration typisieren
Wollen Sie eine Konfigurationsdatei typsicher einlesen, fällt die Struktur unmittelbar in einen Typ.
Typen aus Testdaten ableiten
Wer die Oberfläche zuerst baut, kann aus vorläufigen Daten Typen gewinnen.
Einen handgeschriebenen Typ prüfen
Vergleichen Sie einen selbst geschriebenen Typ mit dem erzeugten, um Fehlendes zu finden.
Begriffe zu TypeScript
- interface
- Eine Deklaration, die die Gestalt eines Objekts beschreibt. **Mehrfache Deklaration desselben Namens verschmilzt sie selbsttätig**, und darin unterscheidet sie sich vom Typalias.
- Typalias
- Eine Deklaration, die einem beliebigen Typ einen Namen gibt. Sie kann auch Unions und primitive Typen benennen, was ein Interface nicht vermag.
- Optionale Eigenschaft
- Ein mit `?` versehenes Feld wie `name?: string`. **Aus einer eingefügten Probe lässt es sich nicht ableiten.**
- Union-Typ
- Ein Typ wie `string | null`, der ausdrückt, dass ein Wert einer von mehreren Typen sein darf.
- Verschachteltes Objekt
- Eine Struktur, deren Wert selbst ein Objekt ist. Dieses Werkzeug zieht sie als eigenes Interface heraus.
- Typableitung
- Das Gewinnen eines Typs aus einem Wert. **Die Ableitung hier beruht auf der einen eingefügten Probe und entspricht nicht zwangsläufig der tatsächlichen Spezifikation.**
Häufig gestellte Fragen
Übrigens – Das Problem der "Typ-Drift", das Typinferenz-Tools lösen
TypeScript ist eine Sprache, mit der sich dank statischer Typisierung Fehler bereits zur Kompilierzeit finden lassen — doch der TypeScript-Compiler weiß nichts über die Form von JSON-Daten aus einer externen API, solange ein Entwickler sie nicht manuell definiert. Immer wenn API-Spezifikation und Beispielantwort auseinanderlaufen oder Felder hinzugefügt bzw. entfernt werden, müssen die Typdefinitionen von Hand aktualisiert werden — diese Kluft zwischen "was die Typen behaupten" und "was die API tatsächlich liefert" ist in vielen Frontend-Projekten ein wiederkehrendes Ärgernis.
Ein JSON-zu-TypeScript-Konverter setzt genau hier an: Er leitet die Typen mechanisch aus einer tatsächlichen Beispiel-JSON-Antwort ab und beschleunigt diese Arbeit erheblich. Ein bekanntes Tool in diesem Bereich ist quicktype, ein Open-Source-Projekt, das Typdefinitionen für mehrere Sprachen erzeugen kann und für die Unterstützung zahlreicher Eingabeformate wie JSON Schema und GraphQL-Schemas bekannt ist.
Die Schwierigkeit der Typinferenz liegt darin, dass JSON selbst keine Information darüber enthält, ob ein Feld immer vorhanden ist oder künftig null werden könnte. Automatisch generierte Typdefinitionen sind deshalb nie eine vollständige Lösung — in der Praxis gilt es als bewährt, sie lediglich als Entwurf zu betrachten, der nur die Struktur dieser konkreten Stichprobe widerspiegelt, und sie mit der tatsächlichen API-Spezifikation abzugleichen und anzupassen.