TypeScript-Interfaces oder -Typen aus einem JSON-Beispiel erzeugen
Läuft in Ihrem Browser. Nichts, was Sie eingeben, wird irgendwohin gesendet.Ein Interface von Hand aus einer JSON-Antwort abzutippen ist mühsam und fehleranfällig. Fügen Sie 1 Beispiel ein und erhalten Sie TypeScript-Interfaces oder -Typen, verschachtelte Objekte und Arrays inklusive. Das Beispiel bleibt in Ihrem Browser, eine Antwort voller echter Daten geht also nirgendwohin.
Diese Seite wurde maschinell aus dem englischen Original übersetzt. Die Übersetzung wurde noch von keinem Menschen geprüft; maßgeblich ist die englische Fassung. Englisches Original lesen
Fügen Sie eine JSON-Beispielantwort in den Bereich JSON ein oder klicken Sie auf Beispiel laden.
Legen Sie den Wurzelnamen fest und wählen Sie Interface oder Type.
Wählen Sie, wie null-Werte typisiert werden, „| null“ oder Optional, und schalten Sie Export oder Readonly ein oder aus.
Klicken Sie auf Kopieren oder auf das Download-Symbol, um eine nach dem Wurzeltyp benannte .ts-Datei zu speichern.
Dieser JSON-zu-TypeScript-Konverter liest ein Beispiel Ihrer Daten und schreibt die passenden Interfaces oder Typaliase. Jedes verschachtelte Objekt erhält eine eigene benannte Deklaration, Arrays erhalten Elementtypen, und die Ausgabe aktualisiert sich beim Tippen, sodass Sie eine Antwort einfügen und eine Sekunde später funktionierende Typen kopieren können.
Entwickler nutzen ihn beim Anbinden einer neuen API: eine Antwort aus dem Netzwerk-Tab einfügen und die Typen für den fetch-Aufruf erhalten. Er hilft auch, wenn eine Konfigurationsdatei oder ein Webhook-Payload zu groß zum Abtippen geworden ist oder wenn Sie untypisierte JSON-Fixtures übernehmen und der Compiler endlich Fehler finden soll.
Der Generator betrachtet jedes Element eines Arrays, nicht nur das erste. Objekte in einem Array werden zu einem Interface zusammengeführt, und ein Schlüssel, der in einigen fehlt, wird optional. Ein Feld mit verschiedenen Arten von Werten wird zu einer Union, etwa string | number. null-Werte fügen entweder | null hinzu oder machen die Eigenschaft optional; Sie entscheiden. Gleiche Formen teilen sich eine Deklaration, und Schlüssel wie pin-code werden in Anführungszeichen gesetzt.
Alles läuft in Ihrem Browser, und nichts, was Sie einfügen, wird irgendwohin gesendet. Die Typen beschreiben nur das gegebene Beispiel, nehmen Sie also ein Beispiel jeder erwarteten Variante auf. Strg+Enter kopiert das Ergebnis. Verwandte Werkzeuge: JSON Formatter, YAML to JSON, CSV to JSON.
Fügen Sie das JSON in den linken Bereich ein. Die Interfaces erscheinen beim Tippen rechts. Legen Sie den Wurzelnamen fest, wählen Sie interface oder type, klicken Sie dann auf Kopieren oder drücken Sie Strg+Enter und fügen Sie das Ergebnis in eine .ts-Datei ein.
Alles hier ist kostenlos, ohne Anmeldung und ohne Obergrenze für Umwandlungen. Die Umwandlung läuft vollständig in Ihrem Browser, das eingefügte JSON verlässt also nie Ihr Gerät, und keine Kopie erreicht einen Server. API-Antworten mit Zugriffstokens, E-Mail-Adressen oder Bestelldaten können Sie bedenkenlos einfügen.
Enthält ein Array mehrere Objekte, werden sie zu einem Interface zusammengeführt. Ein Schlüssel, der nur in einigen vorkommt, wird mit einem Fragezeichen als optional markiert. Steht die null-Option auf Optional, wird auch ein Schlüssel mit dem Wert null als optional markiert.
Beide beschreiben dieselbe Form. Interfaces lassen sich erweitern und zusammenführen, und viele Teams bevorzugen sie für Objekte. Typaliase können zusätzlich Unions und Mapped Types ausdrücken. Nehmen Sie, was Ihre Codebasis schon verwendet; das Werkzeug schreibt beides.
Der Elementtyp wird zu einer Union, zum Beispiel (string | number)[]. Ein leeres Array wird zu unknown[], weil es nichts abzuleiten gibt; fügen Sie ein Beispielelement hinzu, um einen genauen Typ zu erhalten.
Ja. Dateien von einigen Megabyte werden in deutlich unter einer Sekunde umgewandelt. Tiefe Verschachtelung ist kein Problem; jede Ebene erhält eine eigene benannte Deklaration, und gleiche Formen werden wiederverwendet statt wiederholt.
Kommen Sie nicht weiter? Fragen Sie zu JSON in TypeScript umwandeln und jeder, der es weiß, kann antworten. Kein Konto nötig.