Zum Inhalt springen
EVOA Toolbox

JSON zu TypeScript

TypeScript-Interfaces oder -Typen aus einem JSON-Beispiel erzeugen. Unterstützt verschachtelte Objekte, Arrays, Unions, null und optionale Eigenschaften.

Lokal in Ihrem Browser verarbeitet. Ihr Text wird nicht hochgeladen.

Tool wird geladen…

Was dieses Tool macht

Fügen Sie eine Beispiel-API-Antwort oder eine Konfigurationsdatei ein und erhalten Sie sofort nutzbare TypeScript-Deklarationen. Verschachtelte Objekte werden zu eigenen benannten Interfaces, Arrays zu typisierten Arrays, und null-Werte erhalten den Typ null, sodass Sie sehen, wo ein Feld fehlen kann.

Enthält ein Array mehrere Objekte, werden deren Strukturen zusammengeführt: Eigenschaften, die in jedem Element vorkommen, bleiben erforderlich, und Eigenschaften, die nur in einigen Elementen auftauchen, werden optional (name?: type). Arrays mit unterschiedlichen Werttypen ergeben Unions wie (string | number)[]. Eigenschaftsnamen, die keine gültigen Bezeichner sind, etwa first-name, werden in Anführungszeichen gesetzt.

Sie legen den Namen des Wurzeltyps fest, ob Interface oder Type-Alias ausgegeben wird, ob exportiert wird und ob Eigenschaften als readonly markiert werden. Die Typableitung läuft in Ihrem Browser anhand des Beispiels, das Sie angeben, das Ergebnis ist also nur so vollständig wie das Beispiel: Prüfen Sie es und lockern Sie Typen dort, wo Ihre API andere Strukturen liefern kann.

So verwenden Sie es

  1. 1Fügen Sie ein repräsentatives JSON-Beispiel ein (abwechslungsreichere Beispiele führen zu einer besseren Erkennung optionaler Felder).
  2. 2Legen Sie den Namen des Wurzeltyps fest und wählen Sie interface oder type.
  3. 3Schalten Sie export und readonly passend zum Stil Ihrer Codebasis um.
  4. 4Kopieren Sie den erzeugten Code oder laden Sie ihn als types.ts herunter und prüfen Sie dann die Feldtypen anhand Ihres API-Vertrags.

Unterstützte Formate

Eingabe: striktes JSON. Ausgabe: TypeScript-Deklarationen (.ts) mit interface oder Type-Aliassen.

Datenschutz

Dieses Tool läuft in Ihrem Browser. Die von Ihnen eingegebenen Daten werden auf Ihrem Gerät verarbeitet und nicht an unsere Server gesendet.

Einschränkungen

  • Die Typen werden nur aus einem Beispiel abgeleitet. Ein Feld, das in Ihrem Beispiel immer ein String ist, kann anderswo eine Zahl oder null sein.
  • Ein leeres Array erhält den Typ unknown[], weil sich daraus nichts ableiten lässt.
  • Objektartige Maps (zum Beispiel Schlüssel, die IDs sind) werden als feste Eigenschaften erzeugt, nicht als Record<string, T>. Wandeln Sie diese von Hand um.
  • Datumswerte, UUIDs und Enums erscheinen als einfaches string oder number; das Tool kann ihre Bedeutung nicht kennen.
  • Alle Zahlen erhalten den Typ number, auch Werte jenseits von 2^53, die JSON.parse rundet.

FAQ

Wie wird entschieden, welche Eigenschaften optional sind?

Nur durch den Vergleich von Objekten innerhalb desselben Arrays (oder an derselben Position wiederholt). Fehlt eine Eigenschaft in mindestens einem Element, wird sie als optional markiert. Eine Eigenschaft, die mit dem Wert null vorhanden ist, erhält den Typ null (oder eine Union mit null), sie ist nicht optional.

Interface oder type: Was soll ich wählen?

Für einfache Objektstrukturen sind beide austauschbar. Interfaces lassen sich erweitern und zusammenführen; Type-Aliasse eignen sich besser für Unions und Mapped Types. Wählen Sie, was Ihre Codebasis ohnehin verwendet.

Warum erhalten zwei verschachtelte Objekte denselben Typnamen?

Objekte mit identischer Struktur werden als eine einzige Deklaration wiederverwendet. Würden zwei verschiedene Strukturen denselben Namen bekommen, erhält die zweite ein numerisches Suffix wie Item2.

Wird mein JSON hochgeladen?

Nein. Die Typen werden in Ihrem Browser erzeugt.

Ähnliche Tools