JSON zu TypeScript Interface Generator
Konvertieren Sie beliebiges JSON sofort in saubere TypeScript Interfaces. Kostenloses Online-Tool — unterstützt verschachtelte Objekte, Arrays und optionale...
Aktualisiert April 2026
Geprüft von Rafael Duarte
// Paste JSON on the left // to generate TypeScript interfaces
So funktioniert's
Vom rohen JSON zur produktionsreifen TypeScript-Schnittstelle
1. JSON einfügen
Eine API-Antwort, eine Konfigurationsdatei oder ein Datenbank-Datensatz — jedes gültige Objekt oder Array funktioniert.
2. Root-Interface benennen
Standardmäßig `RootObject` — benenne es nach deiner Domäne um, z. B. `Benutzer` oder `Bestellung`.
3. Ergebnis kopieren
Klicke auf Copy oder drücke `Shift+Enter` und füge das Ergebnis direkt in deine `.ts`/`.tsx`-Dateien ein.
Was dieses Tool kann
Deckt die ganze Bandbreite realer JSON-Strukturen ab
Verschachtelte Objekte
Jedes innere Objekt bekommt ein eigenes, benanntes Interface — die Reihenfolge stellt sicher, dass Abhängigkeiten zuerst deklariert werden.
Typisierte Arrays
Primitive werden zu string[]/number[]; Arrays aus Objekten erzeugen ein eigenes Interface plus [].
Umschalten zwischen interface und type
Wechsle je nach Konvention deines Projekts zwischen interface und type.
Null-Felder korrekt behandeln
Werte mit null werden sauber typisiert — bei Bedarf kannst du sie später zu Union-Types erweitern.
Kaputtes JSON automatisch reparieren
Der Fix-Button nutzt die Bibliothek jsonrepair, um überzählige Kommas, fehlende Anführungszeichen und nicht geschlossene Klammern zu korrigieren, bevor die Interfaces generiert werden.
Akzeptiert ein Array von Objekten als Root
Füge ein Array ein — etwa eine von einer API zurückgegebene Benutzerliste — und das Tool erzeugt das Interface aus dem ersten Eintrag, ohne dass du manuell ein Objekt herauslösen musst.
Wie jeder JSON-Typ zu TypeScript wird
Direkte Entsprechung zwischen JSON-Werten und TypeScript-Typen
Wann du das brauchst
Die häufigsten Szenarien unter den Nutzern des Tools
REST-API-Antworten typisieren
Füge das vom Backend zurückgegebene JSON ein und erhalte fertige Interfaces für fetch oder axios.
Konfigurationsdateien typisieren
Wandle eine config.json in ein Interface um, damit dein Editor die Schlüssel per Autovervollständigung vorschlägt.
Entwicklung beschleunigen
Spar dir das manuelle Schreiben von Interfaces für komplexe Payloads mit Dutzenden verschachtelten Feldern.
Drittanbieter-APIs integrieren
Füge ein Beispiel aus der Dokumentation ein, um das Format zu verstehen und sofort Ausgangstypen zu erhalten.
Schnell prototypen, bevor der Code steht
Erzeuge die typisierte Struktur in Sekunden, damit dein Editor schon Autovervollständigung anbietet, bevor du die eigentliche Logik schreibst.
Ergebnis mit Syntax-Highlighting prüfen
Das Ausgabefeld färbt Schlüsselwörter, primitive Typen, Interface-Namen und Felder getrennt ein — praktisch, um ein großes Interface vor dem Einfügen visuell zu überprüfen.
Häufige Fehler
Automatische optionale Felder erwarten
Der Generator typisiert anhand der übergebenen Daten — Felder, die manchmal fehlen können, musst du danach manuell mit ? markieren.
`null` als endgültigen Typ stehen lassen
In Produktion solltest du das je nach tatsächlich möglichen Werten zu string | null erweitern.
Leere Arrays ohne Kontext
Werden zu unknown[] — ohne Beispieldaten im Array lässt sich der Elementtyp nicht ableiten.
Root-Interface-Name mit Leerzeichen oder Symbolen
Anders als verschachtelte Interfaces (die automatisch in PascalCase umgewandelt werden), wird der Name des Root-Interface exakt so übernommen, wie du ihn eingibst — Leerzeichen oder ungültige Zeichen erzeugen TypeScript, das nicht kompiliert.
Ein Array aus Primitiven als Root einfügen
Die Wurzel muss ein Objekt oder ein Array von Objekten sein. Ein Array aus reinen Strings oder Zahlen hat keine Felder zum Typisieren und liefert nur einen Hinweiskommentar, kein Interface.
Tupel statt Union bei gemischten Arrays erwarten
Ein Array wie ["a", 1, true] wird nicht zu einem positionsbasierten Tupel — der Generator erzeugt ein Union (string | number | boolean)[], da TypeScript aus losem JSON keine festen Positionen ableiten kann.
Warum dieses Tool
Verschachtelte Strukturen werden rekursiv verarbeitet, ein Interface pro Ebene, in der richtigen Reihenfolge — Abhängigkeiten stehen immer vor ihrer Verwendung, ganz ohne manuelles Sortieren.
Kompatibel mit TypeScript 3.0+ und jedem gängigen Framework — React, Next.js, Vue, Angular oder Node.js.
Läuft zu 100 % im Browser: Das eingefügte JSON wird nie an einen Server übertragen. Das macht das Tool auch für sensible Payloads unbedenklich — relevant, wenn du DSGVO-konform mit echten Nutzer- oder Kundendaten arbeitest.
`interface` vs. `type`
Beide Varianten stehen über den Umschalter im Tool zur Verfügung
Häufige Fragen
Füge das JSON ein — der Generator verarbeitet verschachtelte Objekte rekursiv, jedes bekommt ein eigenes benanntes Interface, in einer Reihenfolge, bei der Abhängigkeiten zuerst erscheinen.
Weiterführende Ressourcen
Offizielle Dokumentation zu Objekttypen, Interfaces und Type Aliases.
Erklärt das strukturelle Typsystem von TypeScript.
Open-Source-Bibliothek, die intern vom Fix-Button genutzt wird, um fehlerhaftes JSON zu reparieren.
Verwandter Artikel
DTO, entity e value object: qual é a diferença e quando usar cada um
Verwandte Tools
- CSV ↔ JSON Konverter Entwickler Konvertiere CSV in JSON oder JSON in CSV sofort online. Füge deine Daten ein, wähle die Richtung und lade das Ergebnis herunter. Kostenlos, privat, ohne...
- JSON-Mock-Datengenerator Entwickler Realistische JSON-Testdaten für Tests und Prototyping generieren — Nutzer, Produkte, Bestellungen und benutzerdefinierte Schemas. Läuft vollständig im Browser.
- YAML ↔ JSON Konverter Entwickler Konvertiere YAML in JSON oder JSON in YAML sofort im Browser. Füge deine Config oder Daten ein, wähle die Richtung und kopiere das Ergebnis. Kostenlos, ohne...
- ASCII Tabellen Generator Entwickler Kostenloser ASCII-Tabellengenerator — erstelle formatierte Texttabellen in MySQL, Markdown, Unicode, abgerundet, Doppellinie und reStructuredText. CSV...
- HTML zu Markdown Konverter Entwickler Kostenloser HTML zu Markdown Konverter mit Live-Vorschau und URL-Abruf. GitHub Flavored Markdown, konfigurierbare Überschriften und Aufzählungszeichen.
