JSON in TypeScript

Aus einer Beispielantwort werden Typen

Die Arbeit mit einer API beginnt fast immer gleich: Du hast eine JSON-Antwort und brauchst dafür einen Typ. Füge die Antwort links ein, und rechts steht das passende TypeScript, fertig für eine .ts-Datei. Von Hand tippst du nichts, und eine Antwort mit zehn Ebenen dauert nicht länger als eine mit zwei.

Vom Payload zur Deklaration

1. Füge dein JSON in das linke Feld ein oder drücke Beispiel, um die Funktion zu sehen.
2. Gib den Namen des Haupttyps an, zum Beispiel User oder ApiResponse.
3. Wähle zwischen interface und type und hake export oder schreibgeschützt an, wenn du sie brauchst.
4. Prüfe das Ergebnis rechts. Bei einem Syntaxfehler erscheint statt der Typen eine Meldung.
5. Mit Kopieren oder .ts herunterladen übernimmst du den Code.

So werden die Typen abgeleitet

• Strings, Zahlen, Booleans und null werden zum passenden TypeScript-Typ.
• Ein verschachteltes Objekt wird zu einem eigenen Interface, benannt nach seinem Schlüssel in PascalCase. Aus shipping_address wird ShippingAddress.
• Bei Arrays werden alle Elemente zusammengeführt. Ein Schlüssel, der nur in einigen vorkommt, bekommt ein Fragezeichen, und Werte verschiedener Art werden zu einer Union wie string | number.
• Zwei Objekte mit exakt gleicher Form teilen sich ein Interface, statt zwei Kopien zu erzeugen.
• Ein leeres Array ergibt unknown[], ein leeres Objekt Record<string, unknown>.

Grenzen beim Raten aus einer Probe

Eine Probe zeigt nur, was sie enthält. Ein Feld, das in deinem Beispiel immer gefüllt war, kann in der Produktion null sein, und eine Zahl, die wie eine ID aussieht, ist anderswo vielleicht ein String. Datumswerte kommen als Strings an und werden deshalb als string typisiert. Sieh die Ausgabe als ersten Entwurf, schärfe sie von Hand nach oder prüfe echte Antworten zur Laufzeit, wenn die Daten nicht in deiner Hand liegen.

Dein Payload bleibt privat

Die Umwandlung läuft auf der Seite. Produktionsantworten, Tokens und personenbezogene Daten in einer eingefügten Probe gehen nicht an einen Server, deshalb kannst du auch echte Daten verwenden.

Häufig gestellte Fragen (FAQ)