JSON zu TypeScript
TypeScript-Interfaces sofort aus JSON-Daten generieren
Das generierte TypeScript erscheint hier...How to Use
- JSON einfügen — fügen Sie ein beliebiges gültiges JSON-Objekt oder -Array in das Eingabefeld ein.
- Optionen anpassen — legen Sie den Namen des Wurzeltyps fest, wählen Sie interface- oder type-Ausgabe und schalten Sie das export-Schlüsselwort um.
- Ergebnis ablesen — TypeScript-Deklarationen werden sofort während der Eingabe erzeugt; verschachtelte Objekte werden in eigene benannte Interfaces ausgelagert.
- Code kopieren — klicken Sie auf Kopieren, um das Ergebnis direkt in Ihr Projekt zu übernehmen.
Features
- Verschachtelte Interfaces — verschachtelte Objekte werden zu eigenen Interfaces mit PascalCase-Namen aus dem Eigenschaftspfad
- Intelligente Arrays — Elementtypen werden vereinheitlicht; gemischte Arrays erzeugen Union-Typen, Objekt-Arrays werden mit optionalen Schlüsseln zusammengeführt
- Wiederverwendung von Formen — identische Objektstrukturen teilen sich ein Interface statt dupliziert zu werden
- interface oder type — beide Deklarationsstile wählbar, mit oder ohne export-Schlüsselwort
- Erkennung ungültigen JSONs — klare Fehlermeldungen zeigen genau, warum die Eingabe nicht geparst werden konnte
- 100% clientseitig — Keine Daten verlassen Ihren Browser.
Use Cases
- API-Anbindung: fügen Sie eine Beispiel-API-Antwort ein und erhalten Sie sofort nutzbare TypeScript-Typen für Ihre Fetch-Aufrufe
- Legacy-Migration: wandeln Sie vorhandene JSON-Konfigurationen oder Mock-Daten in typisierte Strukturen um, wenn ein Projekt auf TypeScript umgestellt wird
- Dokumentation: erzeugen Sie präzise Typdefinitionen für Webhook-Payloads oder Ereignisschemata
- Prototyping: erstellen Sie schnell Typgerüste, während Sie eine neue Datenquelle erkunden, bevor Sie Validierungsschemata schreiben
Related Tools
- JSON Formatter — JSON vor der Umwandlung formatieren, validieren und verschönern.
- JSON Schema Generator — leiten Sie ein JSON Schema aus Ihren Daten für die Laufzeitvalidierung ab.
- YAML Converter — YAML-Konfigurationen zuerst nach JSON umwandeln, dann Typen erzeugen.
Häufig gestellte Fragen
Was ist der Unterschied zwischen interface- und type-Ausgabe?
Interfaces sind die klassische Art, Objektstrukturen in TypeScript zu beschreiben, und unterstützen Declaration Merging. Type-Aliase sind flexibler und können auch Primitive, Arrays und Unions darstellen. Mit dem Umschalter wechseln Sie zwischen beiden Ausgaben – sie beschreiben dieselbe Struktur.
Wie werden Arrays mit gemischten Werten behandelt?
Das Werkzeug prüft jedes Array-Element und vereinheitlicht die Typen. Haben alle Elemente denselben Typ, erhalten Sie T[]; bei gemischten Elementen entsteht eine Union wie (string | number)[]. Objekt-Arrays werden zu einem Interface zusammengeführt, und Schlüssel, die nicht in allen Elementen vorkommen, werden optional.
Werden meine JSON-Daten an einen Server gesendet?
Nein. Die gesamte Umwandlung läuft vollständig in Ihrem Browser mit clientseitigem JavaScript. Ihr JSON verlässt Ihr Gerät nicht, sodass Sie bedenkenlos private API-Antworten oder Konfigurationsdaten einfügen können.