JSON zu TypeScript

TypeScript-Interfaces oder -Typen aus einem JSON-Beispiel erzeugen – mit verschachtelten Typen, zusammengeführten Arrays, optionalen Feldern und readonly.

Läuft lokal in deinem Browser

Arrays aus Objekten werden zusammengeführt: Felder, die in manchen Einträgen fehlen, werden optional (?).

Über dieses Tool

Wer eine API in TypeScript anbindet, braucht passende Typen für die Antworten. Statt sie von Hand abzutippen, fügst du hier einfach eine Beispielantwort ein und erhältst sofort Interfaces oder Typ-Aliase – mit eigenen Typen für verschachtelte Objekte und Array-Einträge.

Arrays aus Objekten werden zusammengeführt: Felder, die nur in manchen Einträgen vorkommen, werden optional, unterschiedliche Werttypen werden zu Union-Typen wie string | null. Alles läuft lokal im Browser, deine Daten verlassen das Gerät nicht. Zum Prüfen und Formatieren des JSON eignet sich der JSON-Formatierer & Validator, für YAML, CSV oder XML der YAML ↔ JSON ↔ CSV Konverter.

So funktioniert’s

  1. Füge ein JSON-Beispiel ein, etwa eine API-Antwort.
  2. Lege den Namen des obersten Typs fest und wähle interface oder type.
  3. Aktiviere bei Bedarf export und readonly.
  4. Kopiere die erzeugten Typen in dein Projekt und passe sie bei Bedarf an.

Häufige Fragen

Wie werden Arrays behandelt?

Alle Einträge eines Arrays werden gemeinsam ausgewertet. Bei Objekten entsteht ein gemeinsamer Typ, dessen Name aus dem Feldnamen abgeleitet wird (users wird zu User). Gemischte Arrays werden zu Union-Typen wie (string | number)[], leere Arrays zu unknown[].

Wann wird ein Feld optional?

Wenn es in mindestens einem Objekt desselben Arrays fehlt. Ein Feld mit dem Wert null ist dagegen vorhanden und bekommt null als möglichen Typ.

interface oder type – was soll ich nehmen?

Für Objektstrukturen sind beide fast gleichwertig. Interfaces lassen sich erweitern und zusammenführen, Typ-Aliase sind flexibler bei Unions. Viele Projekte legen sich per Lint-Regel auf eine Variante fest.

Wie genau sind die erzeugten Typen?

Sie spiegeln genau das Beispiel wider. Kommt ein Feld in deinem Beispiel nicht vor oder ist ein Wert zufällig immer gleich, kann der Generator das nicht wissen – nutze daher möglichst vollständige Beispiele und prüfe das Ergebnis. Datumswerte erscheinen als string, weil JSON keinen Datumstyp kennt.