Xoricon Toolbox LogoXoricon

JSON nach TypeScript Interface

Aus JSON-Beispieldaten lokal im Browser TypeScript-Interfaces und Type Aliases ableiten.

TypeScript-Einstellungen

Eingabe

Privat by Design: Ihre Daten verlassen Ihr Gerät nicht. Abgeleitete Typen sind eine Momentaufnahme der Beispieldaten.

Eine fehlende Property ist nicht dasselbe wie eine vorhandene Property mit null.

Ausgabe

Fügen Sie gültiges JSON ein, um TypeScript-Typen zu erzeugen.

Fügen Sie gültiges JSON ein, um TypeScript-Typen zu erzeugen.

Gut zu wissen

Der JSON-nach-TypeScript-Interface-Generator leitet TypeScript-Typen direkt im Browser aus JSON-Beispieldaten ab, wahlweise als interface oder type alias, mit T[] oder Array<T>-Notation für Arrays. Readonly-Properties und ReadonlyArray-Typen sowie ein export-Präfix lassen sich einzeln aktivieren.

Typische Suchanfragen sind JSON nach TypeScript Interface, JSON to TypeScript und API Types erstellen. Ein JSON Pointer wie /data/users wählt gezielt einen Unterbaum aus, und optionale Properties lassen sich zusätzlich um undefined erweitern. Wichtig: Die Typen werden aus einer Momentaufnahme der Beispieldaten abgeleitet, und eine fehlende Property ist nicht dasselbe wie eine vorhandene Property mit null.

Typische Anwendungsfälle

Typen aus einer API-Antwort für ein Frontend ableiten

Füge eine Beispiel-API-Antwort ein, um schnell ein passendes TypeScript-Interface für die Frontend-Entwicklung zu erhalten.

Nur einen Teilbereich eines großen Webhook-Payloads typisieren

Nutze einen JSON Pointer wie /data/users, um gezielt nur den relevanten Unterbaum eines großen Payloads zu typisieren.

Tipps für bessere Ergebnisse

Fehlende vs. null-Properties fachlich prüfen

Da eine fehlende Property nicht dasselbe wie eine vorhandene Property mit null ist, prüfe bei optionalen Feldern, ob „optional mit undefined“ die richtige Semantik abbildet.

Mehrere Beispiele für vollständigere Typen nutzen

Da die Typen nur eine Momentaufnahme der Beispieldaten sind, teste mit mehreren repräsentativen JSON-Beispielen, um seltene Felder und Varianten nicht zu übersehen.

Wie es funktioniert

Schritt für Schritt

  1. 1

    JSON-Beispiel einfügen

    Füge ein repräsentatives JSON-Beispiel in das Eingabefeld ein.

  2. 2

    Deklarationsstil und Optionen wählen

    Wähle interface oder type, Array-Notation, Readonly-Optionen und den Root-Namen.

  3. 3

    TypeScript kopieren oder herunterladen

    Kopiere den erzeugten TypeScript-Code oder lade ihn als Datei herunter.

Funktionen

Interface oder Type Alias

Erzeuge Objekttypen wahlweise als interface oder als type alias.

Readonly und ReadonlyArray

Erzeuge readonly Properties und ReadonlyArray-Typen für unveränderliche Datenstrukturen.

Lokale Verarbeitung

Deine Daten verlassen nie dein Gerät; die Typableitung läuft vollständig im Browser.

Häufige Fragen

Sind die abgeleiteten Typen immer vollständig korrekt?

Nein. Sie sind eine Momentaufnahme der Beispieldaten; optionale Felder und Varianten sollten fachlich geprüft werden.

Werden meine Daten hochgeladen?

Nein. Die Typableitung läuft vollständig lokal im Browser.

Weitere Tools

JSON Formatter

JSON lokal validieren, formatieren, minifizieren, analysieren und als Baum ansehen.

JSON nach YAML

JSON-Dateien oder eingefügten JSON-Text direkt im Browser in YAML umwandeln.

JSON nach CSV

JSON-Dateien oder eingefügten JSON-Text direkt im Browser in CSV umwandeln.

JSONPath Query Evaluator

RFC-9535-JSONPath-Abfragen lokal gegen JSON ausführen und Normalized Paths anzeigen.