DE

JSON in TypeScript umwandeln

Füge JSON ein und du bekommst TypeScript-Interfaces oder Type-Aliase. Optionale Felder erhalten ein Fragezeichen, null-Werte ergänzen | null, und Arrays mit gemischten Werten werden zu Union-Typen.

Kostenlos und privat. Alles läuft in deinem Browser, nichts wird hochgeladen.

So funktioniert es

  1. JSON einfügenFüge eine Antwort deiner API ein oder öffne eine .json-Datei. Mit Beispiel siehst du, wie es aussieht.
  2. Optionen anpassenLeg den Namen des obersten Typs und die Optionen für diese Sprache fest. Der Code aktualisiert sich beim Tippen.
  3. Kopieren oder herunterladenKopiere den Code in dein Projekt oder lade ihn als Datei herunter.

Interfaces für API-Antworten

Die Antwort eines fetch-Aufrufs zu typisieren gehört zu den häufigsten Aufgaben in einem TypeScript-Projekt. Füge hier eine echte Antwort ein und du bekommst ein Interface pro Objektstruktur, mit verschachtelten Objekten und Arrays bis ganz nach unten typisiert. Schlüssel, die keine gültigen Bezeichner sind, etwa "Created At" oder "123abc", werden in Anführungszeichen gesetzt, damit der Typ weiterhin zu den Daten passt.

Wähle interface oder type, ob alle Typen exportiert werden und ob Felder readonly sind. Datumsangaben bleiben string, weil JSON keinen Datumstyp kennt und JSON.parse Texte liefert. Ein Feld, das in jedem Eintrag null ist, wird zu unknown, damit der Compiler dich zwingt, es vor der Verwendung zu prüfen.

Häufige Fragen

Interface oder type, was soll ich nehmen?

Beides funktioniert für Objektstrukturen. Interfaces lassen sich erweitern und zusammenführen, Type-Aliase können auch Unions beschreiben. Viele Teams nutzen Interfaces für API-Modelle, deshalb ist das die Voreinstellung.

Wird mein JSON irgendwohin hochgeladen?

Nein. Die Typen werden in deinem Browser erzeugt. API-Antworten mit Kundendaten oder Schlüsseln verlassen dein Gerät nie.

Wie werden optionale Felder erkannt?

Enthält das JSON eine Liste von Objekten, wird jedes Objekt verglichen. Ein Feld, das in mindestens einem Objekt fehlt, wird als optional markiert. Bei einem einzelnen Objekt gilt jedes Feld als Pflichtfeld.

Was passiert mit Feldern, die immer null sind?

Der Typ lässt sich aus dem Beispiel nicht ablesen, deshalb bekommt das Feld einen allgemeinen Typ wie unknown, object, Any oder JsonElement. Füge ein Beispiel hinzu, in dem das Feld einen Wert hat, dann wird der Typ genau.

Warum wird meine 1.0 als Dezimalzahl typisiert?

Das Tool schaut, wie die Zahl geschrieben ist. 1.0 oder 2.5 werden zu double oder float, 1 wird zur Ganzzahl. Ist ein Feld in manchen Einträgen ganzzahlig und in anderen dezimal, wird der Dezimaltyp verwendet.

Kann ich das Ergebnis in Produktivcode verwenden?

Ja, der Code lässt sich in den üblichen Setups direkt kompilieren. Prüf Namen und Typen, bevor du ihn eincheckst, denn ein Beispiel kann nie alle möglichen Werte zeigen.

Funktioniert es auch offline?

Ja. Nachdem du die Seite einmal geöffnet hast, funktioniert sie auch ohne Internetverbindung.