Was ist JSON zu TypeScript?

JSON to TypeScript wandelt JSON-Daten in TypeScript-Interfaces und Typdefinitionen um. Es erkennt Strings, Zahlen, Booleans, Arrays und verschachtelte Objekte und markiert nullable Felder als optional mit Union-Types. Sparen Sie sich das manuelle Tippen von Typen für API-Antworten.

Wenn ein Array Objekte mit leicht unterschiedlicher Form enthält, führt der Generator sie zusammen: In einigen Datensätzen fehlende Keys werden mit '?' optional. Jedes verschachtelte Objekt bekommt eine eigene benannte Schnittstelle (User, UserAddress, UserAddressGeo). Gemischte Arrays ergeben Union-Typen wie (string | number)[]. Datums-Strings im ISO-8601-Format werden mit einem JSDoc-Hinweis versehen, und String-Felder mit einer kleinen wiederkehrenden Wertmenge werden als String-Literal-Union statt als allgemeines string abgeleitet. Neben der TypeScript-Ausgabe liefert dieselbe Eingabe drei weitere Tabs: ein passendes Zod-Schema, Mock-Daten mit realistischen Beispielwerten und ein draft-07-JSON-Schema. Wechseln Sie zwischen Interface und Type-Alias, schalten Sie das Schlüsselwort export ein, sortieren Sie die Schlüssel von A→Z und aktivieren Sie camelCase, um snake_case- oder kebab-case-Schlüssel in idiomatische TypeScript-Namen umzuwandeln.

Anleitung

1. Schritt 1 — Fügen Sie ein JSON-Objekt oder -Array ein, ziehen Sie eine .json-Datei in das Eingabefeld oder laden Sie Live-JSON von einer URL. Das Tool analysiert die Struktur und leitet TypeScript-Typen für jedes Feld ab.
2. Schritt 2 — Passen Sie die Ausgabe an: Legen Sie den Namen des Root-Interfaces fest, wählen Sie zwischen Interfaces und Type-Aliasen, und aktivieren Sie optionale Eigenschaften für Felder, die null sein können.
3. Schritt 3 — Kopieren Sie die Ausgabe oder laden Sie sie herunter. Vier Tabs teilen sich dieselben Einstellungen: TypeScript-Typen, ein passendes Zod-Schema für die Laufzeit-Validierung, fertige Mock-Daten für Tests und Storybook sowie ein draft-07-JSON-Schema für OpenAPI oder Formular-Bibliotheken. Alle verschachtelten Objekte erhalten automatisch eigene benannte Interfaces.

Wann verwenden

• Eine API-Antwort typisieren, für die es keine OpenAPI/Swagger-Spezifikation gibt.
• Schnell Typen für eine JSON-Konfigurationsdatei (tsconfig.json, package.json) erzeugen, die ein Skript einliest.
• In Sekunden eine getypte Hülle um die Antwort eines Drittanbieter-SDK ziehen.

Ergebnis

Ihre API gibt ein Benutzerobjekt mit verschachtelter Adresse und Einstellungen zurück. Fügen Sie die JSON-Antwort ein, setzen Sie den Root-Namen auf User, und erhalten Sie saubere Interfaces: User, UserAddress, UserPreferences – mit korrekten Typen wie string | null für optionale Felder.

Häufige Fragen

Wie entscheidet der Generator, welche Felder optional sind?

Bei einer einzelnen Eingabe-Objekt und aktivierter Option „Nullable als optional markieren" erhalten null-Felder ein '?'. Bei Arrays von Objekten bildet der Generator die Vereinigung aller Keys; alles, was in mindestens einem Datensatz fehlt, wird optional.

Was passiert bei Arrays mit unterschiedlich geformten Elementen?

Gleiche Logik: In jedem Element vorhandene Keys bleiben Pflicht, nur in manchen vorhandene werden optional, gemischte primitive Werte ergeben Unions wie string | number. Ergebnis ist ein Interface, das das gesamte Array beschreibt.

Interface oder Type Alias wählen?

Interfaces lassen sich per Declaration Merging einfach erweitern und sind der übliche Weg für API-Formen. Type Aliase eignen sich besser, wenn man später mit Unions, Intersections oder Mapped Types arbeitet. Zur Laufzeit kommt dasselbe heraus: nehmen Sie, was Ihr Projekt nutzt.

Warum stehen manche Property-Namen in Anführungszeichen?

Wenn ein Key Zeichen enthält, die als TypeScript-Bezeichner ungültig sind (Bindestrich, Leerzeichen, führende Ziffer, Punkt), setzt der Generator ihn in Anführungszeichen. Der Typ bleibt gültig, im Code greifen Sie über obj["weird-key"] zu.

Erkennen die erzeugten Typen Änderungen, wenn sich die API-Antwort ändert?

Ja, wenn Sie sie neu erzeugen. Die Typen sind ein Schnappschuss des eingefügten JSON, sie aktualisieren sich nicht von selbst. Ein gängiger Ablauf: bei jeder API-Version neu generieren und das Diff im Code-Review prüfen.

Ähnliche Tools