JSON-zu-TypeScript-Konverter

Füge eine API-Antwort ein und erhalte sofort einsetzbare TypeScript-Interfaces oder Type-Aliase, inklusive verschachtelter Typen, optionaler Felder und abgeleiteter null-Unions.

Läuft im BrowserOhne AnmeldungKein Upload

TypeScript

Anleitung: JSON zu TypeScript

  1. Füge ein JSON-Beispiel, etwa eine API-Antwort, in das linke Feld ein oder öffne eine .json-Datei.
  2. Lege den Namen des Root-Typs fest (zum Beispiel User oder ApiResponse).
  3. Wähle Deklarationen mit interface oder type und schalte export, readonly oder durchgehend optionale Felder ein oder aus.
  4. Wähle unknown (sicherer) oder any für Werte, die das Beispiel nicht verrät, etwa leere Arrays und nulls.
  5. Kopiere den generierten Code oder lade ihn als .ts-Datei herunter.

So werden die Typen abgeleitet

  • Primitive: Strings, Zahlen und Booleans werden zu string, number und boolean.
  • Verschachtelte Objekte werden zu eigenen, benannten Interfaces in PascalCase, aus billing_address wird also BillingAddress.
  • Arrays von Objekten werden zu einem Elementtyp zusammengeführt und im Singular benannt: users ergibt User[]. Ein Schlüssel, der in manchen Elementen fehlt, wird optional (key?:).
  • Null-Werte werden mit den anderen Werten dieses Schlüssels kombiniert: string | null. Ein Schlüssel, der immer nur null ist, fällt auf unknown oder any zurück.
  • Gemischte Arrays werden zu Union-Arrays wie (number | string)[].
  • Identische Strukturen werden einmal deklariert und wiederverwendet; unterschiedliche Strukturen, die denselben Namen bekämen, erhalten ein numerisches Suffix.
  • Schlüssel, die keine gültigen Bezeichner sind, etwa "first-name" oder "2fa", werden in Anführungszeichen gesetzt.

interface vs. type

Für einfache Objektstrukturen sind beide nahezu austauschbar. interface-Deklarationen lassen sich erweitern und zusammenführen und liefern etwas klarere Compilerfehler. type-Aliase können zusätzlich Unions und Mapped Types ausdrücken. Viele Teams verwenden Interfaces für API-Modelle und Types für alles andere; wähle, was deine Codebasis oder dein Linter (@typescript-eslint/consistent-type-definitions) erwartet.

Bessere Typen aus deinem Beispiel

Typen können nur so vollständig sein wie das Beispiel. Füge eine Antwort mit optionalen Feldern oder ein Array mit mehreren unterschiedlichen Elementen ein, damit der Generator optionale und nullable Schlüssel erkennen kann. Werte wie Datumsangaben und Enums kommen in JSON als einfache Strings an; schränke sie danach von Hand ein, zum Beispiel status: 'active' | 'disabled'. Für die Laufzeitvalidierung kombinierst du die generierten Typen mit einer Schema-Bibliothek wie Zod.

Häufig gestellte Fragen

Wird mein JSON hochgeladen?
Nein. Die Typen werden per JavaScript in deinem Browser generiert. API-Antworten mit Tokens oder personenbezogenen Daten verlassen nie dein Gerät.
Wie werden optionale Eigenschaften erkannt?
Haben Objekte im selben Array unterschiedliche Schlüssel, werden Schlüssel, die in mindestens einem Objekt fehlen, mit ? als optional markiert. Bei einem einzelnen Objekt ist jeder Schlüssel Pflicht, es sei denn, du aktivierst Alle optional.
Sollte ich <code>unknown</code> oder <code>any</code> verwenden?
unknown ist sicherer: TypeScript zwingt dich, den Wert vor der Verwendung einzuschränken. any schaltet die Typprüfung für diesen Wert ab. Verwende es nur, wenn du die Typen später verfeinern willst.
Warum wird ein ISO-Datum als <code>string</code> typisiert?
JSON hat keinen Datumstyp, Datumsangaben werden also als Strings übertragen. Wenn du sie nach dem Parsen mit new Date() umwandelst, ändere die Eigenschaft in deinem Modell auf Date.
Kommt das Tool mit großem oder tief verschachteltem JSON klar?
Ja. Die Generierung skaliert linear mit der Größe der Eingabe und läuft lokal, sodass auch Antworten mit mehreren Megabyte in deutlich unter einer Sekunde konvertiert werden.

Ähnliche Tools

JSON Formatter JSON verschönern, minifizieren und mit Zeilen-/Spaltenfehlern validieren. JSON Diff Zwei JSON-Objekte vergleichen und Änderungen nach Pfad auflisten. YAML zu JSON YAML-Konfigurationen in JSON umwandeln, mit Multi-Dokument-Support und präzisen Fehlern. cURL Converter curl-Befehle in fetch-, Axios-, Python-, Go- oder PHP-Code umwandeln.