← Alle Tools Code Gen

JSON zu TypeScript Interface Generator

JSON einfügen und sofort TypeScript-Interfaces erhalten — kein manuelles Tippen nötig.

0 Z.
oder Strg+Enter drücken

100% clientseitig

Die gesamte Generierung läuft in Ihrem Browser. Ihre Daten werden nie an einen Server gesendet.

Wie Typinferenz funktioniert

Der Generator analysiert Ihr JSON und leitet für jeden Wert einen TypeScript-Typ ab: Zeichenketten werden zu string, Zahlen zu number, Booleans zu boolean, und null wird zu null. Arrays werden als T[] typisiert, wobei T der abgeleitete Elementtyp ist. Wenn ein Array Elemente verschiedener Typen enthält, wird der Elementtyp zu einer Union wie string | number.

Verschachtelte Objekte werden zu eigenen benannten Interfaces. Das Root-Objekt heißt standardmäßig "Root" (anpassbar), und jedes verschachtelte Objekt erhält einen PascalCase-Namen aus seinem Schlüssel — ein Schlüssel "userProfile" generiert beispielsweise das Interface "UserProfile". Das hält die Ausgabe modular und lesbar.

Eigenschaften, die in einigen Array-Elementen vorhanden, in anderen aber fehlen, werden automatisch mit dem ?-Modifikator als optional markiert. Das modelliert reale API-Antworten korrekt, bei denen Felder je nach Datensatzstatus vorhanden sein können oder nicht.

Ausgabeoptionen und Stil

Sie können zwischen Interface- und Typ-Alias-Ausgabe wählen. Interfaces sind die idiomatische Wahl für Objektformen und unterstützen Deklarationszusammenführung; Typ-Aliase sind bevorzugt, wenn Sie Union-Typen auf oberster Ebene benötigen. Der Generator gibt standardmäßig Interfaces aus, kann aber mit einem Klick zu Typ-Aliasen wechseln.

Readonly-Modifikatoren können allen Eigenschaften hinzugefügt werden, um unveränderliche Typen zu erzeugen — nützlich für Redux-State, Konfigurationsobjekte und API-Antwortmodelle, die nach der Erstellung nicht mutiert werden sollen. Die Präferenz für Semikolons vs. Kommas als Eigenschaftstrennzeichen ist ebenfalls konfigurierbar.

Das Schlüsselwort export wird standardmäßig jedem Interface vorangestellt, damit die generierte Datei sofort importierbar ist. Namespace-Wrapping ist verfügbar, um alle generierten Typen unter einem einzelnen Modul-Bezeichner zu gruppieren, was in großen Codebases üblich ist.

Praktische Entwicklungs-Workflows

Der häufigste Workflow ist das Typisieren einer externen API-Antwort. Rufen Sie eine Beispielantwort ab, fügen Sie das JSON ein und verwenden Sie die generierten Interfaces als Typ-Argument für fetch-Aufrufe, Axios-Anfragen oder React Query Hooks. Das eliminiert ganze Kategorien von Laufzeit-Typfehlern.

Beim Prototyping eines neuen Features haben Sie oft eine Beispieldatendatei bevor Sie formale Typdefinitionen haben. Der Generator bootstrapt Ihre Typen aus den Daten, damit Sie sofort typsicheren Code schreiben können und die Typen verfeinern, während sich das Schema stabilisiert.

Teams, die JavaScript-Codebasen zu TypeScript migrieren, nutzen den Generator zur Massenproduktion von Interface-Dateien für bestehende Datenmodelle. Selbst unvollkommene generierte Typen dienen als Ausgangspunkt, der weit schneller ist als jedes Interface manuell zu schreiben.

FAQ

Werden meine Daten an einen Server gesendet?

Nein. Die gesamte Verarbeitung findet vollständig in Ihrem Browser statt. Ihr JSON verlässt Ihr Gerät nie.

Wie werden Arrays von Objekten mit inkonsistenten Schlüsseln behandelt?

Der Generator führt alle in jedem Element gefundenen Schlüssel zusammen. Schlüssel, die in einigen Elementen vorhanden, in anderen aber nicht, werden mit ? als optional markiert. Das resultierende Interface repräsentiert präzise den vollständigen Satz möglicher Eigenschaften.

Kann ich Zod-Schemas statt Interfaces generieren?

Dieses Werkzeug generiert einfache TypeScript-Interfaces und Typ-Aliase. Für die Zod-Schema-Generierung wäre ein dediziertes Zod-spezifisches Werkzeug nötig.

Was passiert mit null-Werten?

Eine Eigenschaft mit dem Wert null wird als null typisiert. Wenn dieselbe Eigenschaft in einigen Objekten als Zeichenkette und in anderen als null erscheint, wird der Typ zu string | null, um die möglichen Werte präzise widerzuspiegeln.

Werden tief verschachtelte Strukturen unterstützt?

Ja. Der Generator verarbeitet beliebige Verschachtelungstiefe und erzeugt für jedes verschachtelte Objekt ein eigenes benanntes Interface, das im übergeordneten Interface namentlich referenziert wird.

Ähnliche Tools