acento.io
Entwickler-Tool

JSON to TypeScript

Generiere TypeScript-Interfaces aus beliebigem JSON – vollständig client-seitig, deine Daten verlassen nie dein Gerät.

Von Carlos Suárez , Systeminformatiker
Zuletzt aktualisiert:

Was dieser JSON to TypeScript macht

Dieser Konverter analysiert dein JSON und erzeugt daraus typsichere TypeScript-Interfaces – inklusive rekursiver Typen für verschachtelte Objekte und automatischer Erkennung optionaler Felder über heterogene Array-Elemente hinweg. Anders als viele Online-Tools wie quicktype.io läuft diese deutschsprachige Version vollständig im Browser: 100% im Browser — deine Daten verlassen nie dein Gerät. Keine Uploads, kein Tracking, keine Server-Logs. JSON wurde 2001 von Douglas Crockford spezifiziert und ist heute das meistgenutzte Datenformat im Web – kaum ein TypeScript-Projekt kommt ohne JSON-Parsing aus. Wer mit tsconfig.json und resolveJsonModule arbeitet, kennt das Problem: Felder, die in manchen Array-Elementen fehlen, werden von einfachen Generatoren als required markiert – du musst dann mühsam von Hand aufräumen. Dieses Tool erledigt das automatisch.

Funktionen

  • Rekursive Typen. Verschachtelte Objekte und Arrays werden vollständig aufgelöst – jede Tiefe erhält korrekte Interface-Definitionen ohne manuelle Nacharbeit.
  • Optionale Felder automatisch. Fehlt ein Schlüssel in einem Array-Element, wird er als field?: Typ markiert – nicht als required. Das spart dir das manuelle Durchsuchen großer JSON-Antworten.
  • Konfigurierbarer Root-Name. Du bestimmst den Namen des Root-Interface selbst, z. B. ApiResponse oder UserProfile – sinnvoll für konsistente Namensgebung im gesamten Projekt.
  • TypeScript JSON Schema-kompatibel. Die generierten Typen lassen sich direkt mit Bibliotheken wie zod oder ajv kombinieren, die ebenfalls auf TypeScript JSON Schema setzen.
  • Keine Abhängigkeiten, kein Build. Der gesamte json parser typescript läuft im Browser – du brauchst kein Node.js, keinen Build-Schritt und keine npm-Installation, um loszulegen.
  • Saubere Ausgabe. Das Ergebnis ist direkt in dein Projekt kopierbar. Für das Formatieren der Quelldaten eignet sich unser [JSON-Formatter](/de/json-formatter/) als Vorstufe.

So benutzt du den JSON to TypeScript

Drei Schritte genügen, um aus rohem JSON saubere TypeScript-Typen zu erzeugen.

  1. JSON einfügen. Füge dein JSON-Objekt oder Array in das Eingabefeld ein. Beispiel: { "city": "Wien", "timezone": "Europe/Zurich", "active": true }
  2. Root-Namen wählen. Gib dem Root-Interface einen sprechenden Namen, z. B. LocationConfig. Das Tool leitet verschachtelte Typen automatisch ab.
  3. Konvertieren klicken. Mit einem Klick auf „Konvertieren“ erzeugt das Tool die vollständigen .ts-Typdefinitionen – inklusive optionaler Felder und Union Types.
  4. Ergebnis kopieren. Kopiere das Ergebnis direkt in deine TypeScript-Datei. Kein Nachbearbeiten nötig, wenn du resolveJsonModule in deiner tsconfig.json aktiviert hast.

Häufige Anwendungsfälle

  • REST-API-Integration. Du bekommst eine API-Antwort vom Backend-Team, z. B. aus Leipzig, und brauchst sofort typsichere Interfaces für dein Frontend – kein manuelles Abtippen mehr.
  • tsconfig.json und resolveJsonModule. Wenn du JSON-Dateien direkt importierst (import config from './config.json'), helfen dir die generierten Typen dabei, Felder korrekt zu benennen und Tippfehler zur Kompilierzeit zu fangen.
  • Schema-Validierung mit zod oder ajv. Generiere das Basis-Interface, leite daraus ein typescript json schema ab und validiere eingehende Daten bereits vor der Verarbeitung – besonders wichtig bei externen Datenquellen.
  • Daten-Migration und ETL. Bei Migrationsprojekten lassen sich JSON-Dumps aus Legacy-Systemen schnell in typisierte Strukturen überführen. Falls du auch YAML-Quellen hast, kannst du den [JSON-YAML-Konverter](/de/json-yaml-converter/) vorschalten.
  • Open-Source-Bibliotheken dokumentieren. Maintainer exportieren oft Beispiel-JSON als Dokumentation. Mit diesem Tool erzeugst du daraus konsistente package.json-kompatible Typen für TypeScript-Nutzer deiner Bibliothek.

Häufig gestellte Fragen

Werden meine Daten an einen Server gesendet?

Nein. Die gesamte Verarbeitung läuft ausschließlich im Browser. Dein JSON verlässt zu keinem Zeitpunkt dein Gerät – es gibt keine Uploads, keine Logs und kein Tracking.

Was ist der Unterschied zwischen `typescript json type` und einem JSON Schema?

Ein TypeScript-Typ bzw. Interface existiert nur zur Kompilierzeit und wird vom Compiler geprüft. Ein JSON Schema hingegen ist ein Laufzeit-Dokument, das Daten dynamisch validiert – beide Konzepte ergänzen sich, sind aber nicht dasselbe.

Wie gehe ich mit `tsconfig.json`-Optionen wie `resolveJsonModule` um?

Aktiviere resolveJsonModule: true in deiner tsconfig.json, damit TypeScript JSON-Dateien direkt importieren kann. Die hier generierten Interfaces passen exakt zu den Typen, die TypeScript dabei ableitet – du kannst sie als explizite Typannotation verwenden.

Kann das Tool mit großen oder unregelmäßigen JSON-Arrays umgehen?

Ja. Der json parser typescript dieses Tools liest alle Array-Elemente und vereint deren Felder. Felder, die nicht in jedem Element vorkommen, werden automatisch als optional (?) markiert – das ist der entscheidende Vorteil gegenüber einfachen json2ts-Alternativen.

Unterstützt das Tool verschachtelte Objekte und Arrays in Arrays?

Vollständig. Jede Ebene – auch Arrays von Objekten, die selbst Arrays enthalten – wird rekursiv als eigenes Interface oder als Inline-Typ abgebildet. Das Ergebnis ist direkt kompilierbar.

Wie verhält sich das Tool bei null-Werten im JSON?

Felder mit null-Wert erhalten den Typ Type | null. Das entspricht der gängigen Praxis in TypeScript-Projekten und vermeidet stille Laufzeitfehler, wenn eine API gelegentlich null zurückgibt.