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.