JSON zu TypeScript
JSON in TypeScript-Interfaces umwandeln und Typdefinitionen generieren
JSON-Eingabe
TypeScript-Ausgabe
Was ist JSON zu TypeScript?
TypeScript fügt JavaScript statische Typen hinzu. Bei JSON aus APIs oder Konfigurationsdateien brauchen Sie oft ein Interface oder einen Typ, der die Struktur beschreibt. Das manuell zu schreiben ist mühsam. Dieses Tool leitet TypeScript-Interfaces aus Ihrem JSON ab: Es analysiert Schlüssel und Werte und erzeugt die entsprechenden Typdefinitionen.
JSON einfügen, TypeScript erhalten. Das Tool läuft in Ihrem Browser. Nichts wird an einen Server gesendet. Die Ausgabe folgt der Standard-TypeScript-Syntax.
So verwenden Sie dieses Tool
JSON einfügen
Fügen Sie Ihr JSON in den linken Editor ein oder laden Sie eine Datei hoch. Nutzen Sie Beispiel für Beispieldaten. Der Generator leitet Typen aus der Struktur ab. Verwenden Sie repräsentative Daten mit allen relevanten Feldern.
Interfaces prüfen
Das rechte Panel zeigt generierte Interfaces. Verschachtelte Objekte erhalten eigene Interfaces. Arrays werden als Type[] typisiert. Optionale Felder können je nach Implementierung ? verwenden.
Kopieren oder Herunterladen
Nutzen Sie <strong>Kopieren</strong> oder <strong>Herunterladen</strong>, um den TypeScript-Code zu erhalten. Fügen Sie ihn in Ihr Projekt ein. Möglicherweise müssen Sie Namen anpassen, Generics hinzufügen oder optionale Felder korrigieren. Zum Validieren des JSON zuerst den JSON Validator verwenden.
Wann JSON zu TypeScript hilft
Bei der API-Integration brauchen Sie oft Typen für die Response-Payload. Ein Beispiel-Response hier einzufügen liefert Interfaces für Ihr Angular-, React- oder Node-Projekt. Konfigurationsdateien, Webhook-Payloads und Datenbankdokumente profitieren ebenso. Interfaces für komplexe verschachtelte Strukturen manuell zu schreiben ist fehleranfällig; dieses Tool leitet die Struktur aus Ihrer Stichprobe ab. Für schema-basierte Generierung nutzen Sie den JSON Schema Generator und Tools wie quicktype.
Beispiele: JSON zu TypeScript
Hier ein Beispiel für die Generierung von TypeScript-Interfaces aus einem JSON-Objekt.
Beispiel: Teilnehmerdatensatz
JSON-Eingabe:
Generierte TypeScript-Ausgabe:
Einschränkungen
Der Generator leitet aus der Stichprobe ab. Wenn ein Feld <code>string | number</code> sein kann, Ihr Sample aber nur Strings enthält, wird der Typ <code>string</code> sein. Bei leeren Arrays kann der Elementtyp <code>unknown</code> sein. Prüfen und bearbeiten Sie die Ausgabe. Für schema-basierte Generierung nutzen Sie den JSON Schema Generator und ein Tool wie quicktype.
Häufig gestellte Fragen
Werden optionale Felder markiert?
Das hängt von der Implementierung ab. Manche Generatoren markieren alle Felder als erforderlich; andere leiten aus dem Sample ab. Prüfen Sie die Ausgabe und fügen Sie ? hinzu, wo nötig.
Was ist mit Union-Typen?
Wenn derselbe Schlüssel in verschiedenen Objekten unterschiedliche Typen hat, kann der Generator string | number oder eine ähnliche Union verwenden. Oder er wählt einen Typ. Prüfen Sie die Ausgabe.
Werden meine Daten irgendwohin gesendet?
Nein. Die Generierung läuft in Ihrem Browser.
Kann ich Typen für andere Sprachen generieren?
Dieses Tool gibt nur TypeScript aus. Die Seite hat Konverter für C#, Java, Python und andere.
Was ist mit Enums?
Wenn ein Feld eine feste Menge von String-Werten hat, kann der Generator einen Union-Typ wie "a" | "b" | "c" erzeugen. Für explizite Enums bearbeiten Sie die Ausgabe.
Verwandte Tools
Für TypeScript siehe typescriptlang.org und TypeScript-Objekte. Für JSON siehe json.org und MDN JSON. Für Schema-zu-Code-Generierung siehe quicktype. Für RFC 8259 (JSON-Spezifikation).