JSON zu TypeScript

Typisierte Modelle aus realen Daten

Konvertieren Sie jedes JSON sofort in TypeScript-Schnittstellen oder -Typen, wobei verschachtelte Objekte, Arrays, Unions und optionale Eigenschaften automatisch abgeleitet werden.

Das manuelle Schreiben von TypeScript-Schnittstellen zur Anpassung an eine API-Antwort ist mühsam und fehleranfällig. Fügen Sie eine JSON-Nutzlast ein und dieses Tool durchläuft die Struktur und generiert eine passende Schnittstelle (oder einen Typalias) mit korrekt typisierten Feldern, verschachtelten Schnittstellen für Objekte und Array-Elementtypen. Gemischte Arrays werden zu Union-Typen, sodass Ihre Modelle die Daten genau widerspiegeln.

Merkmale

Generieren Sie Schnittstellen oder Typaliase
Behandelt verschachtelte Objekte und Arrays
Leitet Unionstypen aus gemischten Arrays ab
Optionale Eigenschaften für Nullen
Benutzerdefinierter Root-Typname
Läuft lokal: Code wurde nie hochgeladen

So verwenden Sie JSON zu TypeScript

1
JSON einfügen
Fügen Sie ein Objekt oder ein Datenarray ein.
2
Optionen festlegen
Wählen Sie eine Schnittstelle oder einen Typ, benennen Sie das Stammverzeichnis und markieren Sie Nullables als optional.
3
Überprüfen Sie die Typen
Verschachtelte Schnittstellen werden automatisch generiert.
4
Kopie
Kopieren Sie das TypeScript in Ihr Projekt.

Häufige Anwendungsfälle

Geben Sie schnell eine API-Antwort ein
Generieren Sie Modelle aus einem JSON-Gerät
Erstellen Sie Schnittstellen für eine Konfigurationsdatei
Bootstrap-Typen für eine neue Integration

Detaillierte Anleitung

Passen Sie die Ausgabe an Ihren Stil an

Wählen Sie aus, ob Schnittstellen oder Typaliase ausgegeben werden sollen, benennen Sie den Stammtyp und markieren Sie optional Nullable-Felder als optional. Der generierte Code wird live aktualisiert und kann in Ihr Projekt eingefügt werden. Alles läuft in Ihrem Browser, sodass private API-Payloads und interne Schemata niemals Ihren Computer verlassen.

Wie Typen abgeleitet werden

Der Konverter liest Ihr JSON und ordnet jeden Wert einem TypeScript-Typ zu: Zeichenfolgen, Zahlen und boolesche Werte werden zu Zeichenfolgen, Zahlen und booleschen Werten, verschachtelte Objekte werden zu ihren eigenen benannten Schnittstellen und Arrays werden zu typisierten Arrays. Wenn ein Array verschiedene Arten von Werten enthält, ist das Ergebnis eine Vereinigung wie (Zeichenfolge | Zahl)[]. Ein Nullwert wird zu Null, da das Beispiel nicht anzeigen kann, was das Feld enthält, wenn es festgelegt ist. Eigenschaftsnamen, die keine gültigen Bezeichner sind, wie etwa „Vorname“, werden in Anführungszeichen gesetzt, sodass die Ausgabe immer kompiliert wird.

Genaue Typen aus Beispieldaten ermitteln

Abgeleitete Typen sind nur so gut wie die Stichprobe. Wenn in einigen API-Antworten ein Feld fehlt, markieren Sie es mit „?“ als optional. Erweitern Sie es nach der Generierung auf string |, wenn ein Feld in der Produktion null sein kann null. Verwenden Sie die umfassendste Antwort, die Sie finden können, idealerweise eine, bei der alle optionalen Felder vorhanden sind. Für APIs, die Sie nicht kontrollieren, koppeln Sie die generierten Typen mit einer Laufzeitvalidierung, zum Beispiel Zod oder io-ts, da TypeScript-Typen zur Laufzeit verschwinden und eine geänderte API nicht abfangen. Datumsangaben kommen in JSON als Zeichenfolgen an. Konvertieren Sie sie also selbst, wenn Sie Datumsobjekte benötigen.

Häufig gestellte Fragen

Wie konvertiere ich JSON in eine TypeScript-Schnittstelle?

Fügen Sie Ihr JSON ein und das Tool generiert sofort eine passende Schnittstelle, erstellt verschachtelte Schnittstellen für Objekte und leitet Array-Elementtypen ab. Kopieren Sie es direkt in Ihren Code.

Behandelt es verschachtelte Objekte und Arrays?

Ja. Verschachtelte Objekte werden zu ihren eigenen benannten Schnittstellen und Arrays werden durch ihre Elemente typisiert. Arrays mit gemischten Typen erzeugen eine Vereinigung wie (string | number)[].

Kann ich Typaliase anstelle von Schnittstellen erhalten?

Ja: Schalten Sie die Option um, um „Typ“-Aliase anstelle von „Schnittstellen“-Deklarationen auszugeben, und benennen Sie den Stammtyp entsprechend Ihrem Projekt um.

Wird mein JSON irgendwo hochgeladen?

Nein. Das Parsen und Generieren erfolgt vollständig in Ihrem Browser, sodass sensible Nutzlasten Ihr Gerät niemals verlassen.

Wie generiere ich TypeScript-Schnittstellen aus JSON?

Fügen Sie Ihren JSON-Code (zum Beispiel eine API-Antwort) ein, geben Sie dem Stamm einen Namen, und das Tool leitet Typen ab und erstellt gebrauchsfertige Schnittstellen, einschließlich verschachtelter Objekte und Arrays. Es läuft lokal, sodass echte Nutzlasten privat bleiben.

Behandelt es verschachtelte Objekte und optionale Eigenschaften?

Ja. Verschachtelte Strukturen werden zu eigenen benannten Schnittstellen, Arrays erhalten Elementtypen und Sie können Felder als optional markieren, damit die Typen mit echten, manchmal fehlenden Daten übereinstimmen.

Kann ich anstelle einer Schnittstelle einen Typalias ausgeben?

Ja. Wählen Sie je nach Stil Ihrer Codebasis eine Schnittstelle oder einen Ausgabetyp. Beide erzeugen genaues TypeScript aus der abgeleiteten JSON-Form.

Typisierte Modelle aus realen Daten

Merkmale

So verwenden Sie JSON zu TypeScript

JSON einfügen

Optionen festlegen

Überprüfen Sie die Typen

Kopie

Häufige Anwendungsfälle