JSON zu TypeScript
Leiten Sie lokal TypeScript-Interfaces aus einem JSON-Beispiel ab. Der kostenlose Generator erfasst verschachtelte Objekte, Arrays und Unions, ohne Ihre Daten hochzuladen.
🔒 Läuft vollständig in Ihrem Browser — nichts wird hochgeladenWas JSON zu TypeScript macht
JSON zu TypeScript liest ein JSON-Beispiel und leitet daraus stark typisierte TypeScript-Interfaces ab, die dessen Struktur beschreiben. Das Tool durchläuft den Wert rekursiv: Objekte werden zu benannten Interfaces, primitive Werte zu den passenden Typen string, number, boolean oder null, und Arrays zu Elementtypen in eckigen Klammern. Enthält ein Array Elemente unterschiedlichen Typs, fasst der Generator sie zu einer Union zusammen, sodass das Ergebnis weiterhin zu den Originaldaten passt. Das ist nützlich, wenn Sie eine API ohne veröffentlichte Typen nutzen, einer Legacy-Nutzlast Typsicherheit hinzufügen oder aus einem schnellen Testdatensatz ein wiederverwendbares Modell machen möchten.
Arrays von Objekten werden sorgfältig behandelt. Statt nur das erste Element zu typisieren, führt das Tool alle Objekte des Arrays zu einem einzigen Interface zusammen und sammelt die Vereinigung der Schlüssel. Schlüssel, die in einigen Elementen fehlen, werden mit einem nachgestellten Fragezeichen als optional markiert – so wie reale Antworten Felder oft nur enthalten, wenn sie befüllt sind. Verschachtelte Objekte werden zu eigenen benannten Interfaces, die aus dem Eigenschaftsnamen abgeleitet werden, sodass die Ausgabe wie von Hand geschriebene Modelle wirkt statt wie ein einziger tief verschachtelter Typ.
Privater Workflow im Browser
Das gesamte Parsen und die Typableitung laufen in Ihrem Browser mit clientseitigem JavaScript ab. Das Tool lädt Ihr JSON, API-Antworten, Kennungen, Tokens oder kundennahe Beispiele nicht auf einen Server hoch und erfordert kein Konto. Dieses rein lokale Modell ist wichtig, weil die in einen Typgenerator eingefügten Daten häufig eine echte Produktivantwort sind, die beim Debuggen erfasst wurde. Die Arbeit auf Ihrem Rechner zu behalten verringert Risiken und liefert das Ergebnis sofort, da zwischen Einfügen und Ausgabe keine Netzwerkanfrage liegt.
Die Oberfläche zeigt JSON-Eingabe, Root-Namen und erzeugte Interfaces dicht beieinander, damit Sie die Ableitung vor dem Kopieren prüfen können. Die Ergebnisse sollten dennoch geprüft werden, bevor Sie sie übernehmen: Ein einzelnes Beispiel kann nicht jedes optionale Feld, jeden nullbaren Wert und jedes Enum offenlegen, das die echte API liefern kann. Erweitern Sie die Typen daher dort, wo Ihr Domänenwissen sagt, dass ein Feld fehlen oder mehr Formen annehmen kann, als das Beispiel zeigt.
Praktische Tipps
Geben Sie das vollständigste Beispiel an, das Sie haben – idealerweise mit befüllten optionalen Feldern und einem Array mit mehr als einem Element, damit die Zusammenführungslogik Unions und Optionalität erkennen kann. Benennen Sie das Root-Interface vor der Generierung passend zu Ihrem Domänenmodell um. Erwägen Sie nach dem Kopieren, zu locker abgeleitete Typen zu verschärfen: Ersetzen Sie allgemeine string-Felder durch Literal-Unions für bekannte Enums, markieren Sie Kennungen als Branded Types, falls Ihr Code sie nutzt, und prüfen Sie, ob ein vom Generator als null typisiertes Feld stattdessen eine nullbare Union sein sollte. Die Ableitung im Browser ist ideal für einen schnellen ersten Entwurf, doch die endgültigen Typen sollten den Vertrag abbilden, von dem Ihre Anwendung tatsächlich abhängt.
So verwenden Sie
- JSON einfügenFügen Sie ein repräsentatives JSON-Objekt oder -Array als Beispiel ein.
- Root benennenWählen Sie einen Namen für das Root-Interface und erzeugen Sie dann die Interfaces.
- Interfaces kopierenPrüfen Sie das abgeleitete TypeScript und kopieren oder laden Sie es herunter.