JSON in TypeScript
Machen Sie aus einem JSON-Beispiel TypeScript-Interfaces oder Typ-Aliase, mit optionalen Feldern und Unions, die aus Ihren Daten abgeleitet werden.
Läuft vollständig in Ihrem Browser
Die Typen werden aus dem eingefügten Beispiel abgeleitet und beschreiben dieses Beispiel, kein Schema: Ein Feld, das in Ihrem Beispiel ein String ist, kann anderswo eine Zahl sein. Alle Zahlen werden zu number, Datumswerte bleiben string. Die Reihenfolge der Eigenschaften folgt JSON.parse, das ganzzahlige Schlüssel zuerst auflistet.
So erzeugen Sie TypeScript aus JSON
- Fügen Sie eine JSON-Antwort oder -Datei in das Feld ein. Mehrere Array-Einträge verbessern das Ergebnis, weil Felder, die in manchen Einträgen fehlen, optional werden.
- Legen Sie den Namen des obersten Typs fest, wählen Sie
interfaceodertypeund aktivieren Sie nach Bedarf export, readonly oder die Erkennung optionaler Felder. - Kopieren Sie die Deklarationen oder laden Sie sie als
.ts-Datei herunter. Prüfen Sie die Namen, denn sie stammen aus Ihren Schlüsselnamen.
Typen aus einem JSON-Beispiel ableiten
TypeScript-Typen beschreiben die Form von Daten, und eine JSON-Antwort enthält diese Form bereits: jeden Schlüssel, die Art des Werts dahinter und wie Objekte ineinander verschachtelt sind. Ein Konverter von JSON in TypeScript geht das Beispiel durch und schreibt diese Form als Deklarationen auf, sodass Sie nicht erst vierzig Felder von Hand abtippen müssen, bevor Sie eine API mit gutem Gewissen aufrufen können.
Der wichtigste Schritt ist der Umgang mit Arrays. Jeder Eintrag in einem Array von Objekten wird gelesen, und ihre Formen werden zusammengeführt: Ein Schlüssel, der in jedem Eintrag vorkommt, bleibt Pflichtfeld, ein Schlüssel, der nur in manchen Einträgen vorkommt, wird optional, und Werte unterschiedlicher Art werden zu einer Union. Deshalb liefert ein Beispiel mit mehreren Datensätzen viel bessere Typen als eines mit nur einem. Ein Wert null wird anders behandelt als ein fehlender Schlüssel, weil beides für den Code, der das Feld liest, etwas anderes bedeutet.
Abgeleitete Typen sind ein Ausgangspunkt, kein Vertrag. Sie können nicht wissen, dass ein String immer einer von drei Werten ist, dass eine Zahl eigentlich eine ganzzahlige ID ist oder dass ein Feld, das in all Ihren Beispielen vorhanden war, in der Produktion verschwinden kann. Lesen Sie das Ergebnis, benennen Sie alles um, was unglücklich geraten ist, und schärfen Sie die Typen nach, auf die es ankommt.
Tipps
- Prüfen Sie zuerst mit JSON formatieren und validieren, ob Ihr Beispiel gültig ist; das Tool zeigt bei einem Syntaxfehler auf das genaue Zeichen.
- Arbeiten Sie stattdessen mit einer YAML-Konfiguration? Wandeln Sie sie mit YAML in JSON umwandeln um und fügen Sie das Ergebnis hier ein.
- Sie möchten in die Nutzdaten eines Tokens schauen, bevor Sie sie typisieren? Dekodieren Sie es mit dem JWT-Decoder.
Häufige Fragen
Wie wird entschieden, ob ein Feld optional ist?
Bei einem Array von Objekten werden die Objekte zu einer gemeinsamen Form zusammengeführt. Ein Schlüssel, der in manchen Einträgen vorkommt, aber nicht in allen, bekommt ein ?. Ein Schlüssel, der vorhanden ist, aber in manchen Einträgen null enthält, ist nicht optional; er wird zu T | null. Schalten Sie die Erkennung optionaler Felder aus, wenn jeder Schlüssel als Pflichtfeld gelten soll.
Wie werden verschachtelte Typen benannt?
Jedes verschachtelte Objekt wird nach seinem Schlüssel in PascalCase benannt, aus billing_address wird also BillingAddress. Bei einem Array verliert der Elementtyp ein abschließendes „s“, wenn der Schlüssel länger als 3 Buchstaben ist und nicht auf ss, us oder is endet: users ergibt User, address dagegen AddressItem. Wollen zwei unterschiedliche Formen denselben Namen, wird die zweite nummeriert, es entstehen User und User2. Die Regel für die Einzahl richtet sich nach englischen Schlüsselnamen.
Was passiert mit Objekten, die dieselbe Form haben?
Sie teilen sich eine Deklaration. Enthalten billing und shipping beide { street, city }, erhalten Sie ein einziges Interface, benannt nach der Stelle, an der es zuerst vorkommt. Zwei Objekte mit denselben Schlüsseln, aber unterschiedlichen Werttypen sind verschiedene Formen und bekommen getrennte Namen.
Warum wird ein leeres Array als unknown[] typisiert?
Ein leeres Array enthält keine Beispiele, also lässt sich über seine Elemente nichts ableiten. unknown[] ist die ehrliche Antwort; ändern Sie es von Hand, sobald Sie den Elementtyp kennen. Ein Array mit gemischten Werten wird zu einer Union, etwa (string | number)[].
Kann die Ausgabe von der echten API abweichen?
Ja. Ein Beispiel zeigt nur die Werte, die es enthält. Ein Feld, das in Ihrem Beispiel immer vorhanden ist, in der Produktion aber manchmal fehlt, wird hier als Pflichtfeld erzeugt, und ein String mit wenigen festen Werten wird einfach string. Für strikte Validierung verwenden Sie ein Schema; für einen schnellen Start nehmen Sie diese Ausgabe und passen sie an.
Wird mein JSON hochgeladen?
Nein. Nichts, was Sie einfügen, wird irgendwohin gesendet; die Umwandlung läuft in Ihrem Browser, und Sie können die Netzwerkverbindung trennen, nachdem die Seite geladen ist.