JSON zu TypeScript-Interfaces
Fügen Sie eine API-Antwort ein und erhalten Sie TypeScript-Interfaces oder Type-Aliase dafür – optionale Schlüssel werden aus den Daten abgeleitet.
Eingabe
Ergebnis
Das Ergebnis erscheint hier.Eine API-Antwort von Hand zu typisieren ist mühsam, und genau dort schleichen sich die Fehler ein: ein Feld, das manchmal fehlt, ein Wert, der manchmal null ist, ein Array, dessen Objekte nicht alle dieselben Schlüssel haben. Dieses Werkzeug übergibt Ihr JSON an quicktype – den Typgenerator, den Glide als Open Source veröffentlicht hat und der hinter der Editor-Erweiterung Paste JSON as Code steckt – und liefert Interfaces, die Sie direkt in ein Projekt einfügen können. Ist das JSON ein Array, wird jedes Element verglichen: Ein Schlüssel, der nur in einigen davon vorkommt, wird optional, und ein Wert, der manchmal null ist, wird zu einer Union mit null.
So arbeitet es
- quicktype-core läuft in der Seite; die Bibliothek ist etwa ein Megabyte groß und wird daher erst geladen, wenn Sie bei diesem Werkzeug zum ersten Mal auf „Ausführen“ klicken.
- Verschachtelte Objekte werden zu eigenen benannten Interfaces, und identische Strukturen an verschiedenen Stellen werden zu einem Typ zusammengeführt.
- Strings, die wie Datumsangaben aussehen, bleiben als string typisiert, denn genau das liefert JSON.parse tatsächlich zurück.
- Wählen Sie Deklarationen als interface oder Type-Alias, markieren Sie alle Felder als readonly und legen Sie den Namen des obersten Typs fest.
Wohin Ihre Daten gehen
Nirgendwohin. Dieses Werkzeug läuft vollständig in Ihrem Browser: Der eingefügte Text wird von der Seite verarbeitet und weder an einen Server übertragen noch protokolliert.
Dieses Tool ist kostenlos und braucht kein Konto. Die Ergebnisse existieren nur in Ihrer geöffneten Seite und werden nirgends gespeichert.
Was es kostet
Dieses Werkzeug ist kostenlos, ohne Anmeldung und ohne Punkte.
Häufige Fragen
- Wie entscheidet das Werkzeug, ob ein Feld optional ist?
- Ausschließlich anhand der Daten, die Sie ihm geben. Ist das JSON ein Array von Objekten und fehlt ein Schlüssel in mindestens einem davon, bekommt dieser Schlüssel ein Fragezeichen. Ein einzelnes Objekt liefert keinerlei Anhaltspunkt, daher ist jeder Schlüssel darin Pflicht. Fügen Sie mehrere echte Antworten als ein Array ein, wenn die optionalen Schlüssel stimmen sollen.
- Warum ist ein Feld als null statt als string | null typisiert?
- Weil jeder Beispielwert null war, hatte quicktype nichts anderes, woran es sich halten konnte – es kann nicht wissen, was das Feld enthält, wenn es gesetzt ist. mirror_url im GitHub-Beispiel zeigt genau diesen Fall. Fügen Sie ein Beispiel hinzu, in dem das Feld einen Wert hat, oder erweitern Sie den Typ von Hand.
- Interface oder Type-Alias – was soll ich wählen?
- Für einfache Objektstrukturen sind beide in der Praxis austauschbar. Interfaces lassen sich erweitern und durch erneute Deklaration zusammenführen, worauf manche Bibliotheken angewiesen sind; Type-Aliase können zusätzlich Unions und Mapped Types ausdrücken. Die meisten Codebasen legen sich auf eines fest, deshalb gibt es die Option – damit die Ausgabe zu Ihrer passt.
- Validiert das die Antwort zur Laufzeit?
- Nein. TypeScript-Typen verschwinden beim Kompilieren, eine nicht passende Antwort kommt also trotzdem durch. Brauchen Sie die Prüfung zur Laufzeit, erzeugen Sie mit dem Werkzeug JSON zu Zod auf dieser Website ein Zod-Schema aus demselben JSON und parsen Sie die Antwort damit.
Das Open Source dahinter
Dieses Werkzeug läuft auf glideapps/quicktype, veröffentlicht unter Apache-2.0. Wer dasselbe Verhalten im eigenen Programm braucht, greift zu dieser Bibliothek.
glideapps/quicktypeAuch bekannt als
- JSON zu TypeScript
- JSON in TypeScript Interface umwandeln
- TypeScript Typen aus JSON generieren
- JSON to TS online
- quicktype online
- API Antwort TypeScript Typ