JSON zu TypeScript: Sofortige Interfaces

Konvertiere JSON in TypeScript-Interfaces aus jedem Beispielobjekt oder -array.

Dein JSON wird vollständig in deinem Browser geparst und konvertiert, sodass es auf deinem Gerät bleibt und nichts auf einen Server hochgeladen wird.

Entwickelt und gepflegt von Udit Agarwal

Brauchst du Go-, Rust- oder Python-Typen? Probiere JSON zu Code.

Über JSON zu TypeScript

Dieser JSON-zu-TypeScript-Konverter verwandelt ein JSON-Beispielobjekt oder -array in Sekunden in einsatzbereite TypeScript-Interfaces. Füge eine echte API-Antwort ein, und er leitet Feldtypen ab, verschachtelt untergeordnete Objekte in eigene benannte Interfaces, führt Arrays von Objekten zu einer Form zusammen und markiert in einigen Elementen fehlende Schlüssel mit einem Fragezeichen als optional. Er ist für Frontend- und Backend-Entwickler, QA-Ingenieure und alle gemacht, die typisierte Clients aufbauen und lieber TypeScript-Typen aus JSON generieren, als sie von Hand zu schreiben. Nutze ihn als schnellen TypeScript-Interface-Generator beim Erkunden eines unbekannten Endpunkts oder um deine Modelle mit Beispieldaten synchron zu halten. Alles läuft lokal in deinem Browser, sodass das eingefügte JSON auf deinem Gerät verarbeitet wird und nichts auf einen Server hochgeladen wird.

Funktionen

  • Generiert benannte TypeScript-Interfaces aus jedem JSON-Objekt oder -Array
  • Wandelt verschachtelte Objekte in eigene exportierte Interfaces mit PascalCase-Namen um
  • Führt Arrays von Objekten zu einem einzigen Interface zusammen, das jeden Schlüssel abdeckt
  • Markiert in einigen Elementen fehlende Schlüssel mit einem Fragezeichen als optional
  • Leitet primitive, Array-, Union- und null-Typen aus deinen Beispielwerten ab
  • Lässt dich das Root-Interface umbenennen, damit es zu deinem Modell passt
  • Validiert das JSON und lokalisiert Zeile und Spalte von Syntaxfehlern
  • Kopiere das Ergebnis oder lade es als .ts-Datei herunter

So verwendest du JSON zu TypeScript

  1. Füge dein JSON-Objekt oder -Array in das Eingabefeld ein.
  2. Setze den Namen des Root-Interface passend zu deinem Modell oder lass ihn als Root.
  3. Prüfe die generierten TypeScript-Interfaces im Ausgabe-Panel.
  4. Kopiere das Ergebnis oder lade es als .ts-Datei herunter.

Beispiel

Eingabe

{ "id": 1, "name": "Ada", "tags": ["a", "b"] }

Ausgabe

export interface Root {
  id: number;
  name: string;
  tags: string[];
}

Ein flaches JSON-Objekt wird zu einem einzigen typisierten Interface.

Häufige Fehler & Fehlerbehebung

  • Die Ausgabe zeigt einen Invalid-Fehler mit Zeile und Spalte. — Das JSON hat ein Syntaxproblem wie ein nachgestelltes Komma, einfache Anführungszeichen oder einen Schlüssel ohne Anführungszeichen. Behebe es an der gemeldeten Zeile und Spalte, dann werden die Interfaces neu generiert.
  • Ein erwartetes Feld ist mit einem Fragezeichen als optional markiert. — Dieser Schlüssel fehlt in mindestens einem Element deines Array-Beispiels. Füge ihn in jedes Element ein, wenn er immer erforderlich sein soll.
  • Eine Eigenschaft kommt als Typ unknown heraus. — Jeder Beispielwert für diesen Schlüssel war null oder undefined, sodass kein konkreter Typ abgeleitet werden konnte. Gib ein Beispiel mit einem echten Wert für dieses Feld an.
  • Das Einfügen eines reinen Werts wie einer Zahl oder eines Strings ergibt nur einen Typalias. — Das ist zu erwarten. Verpacke den Wert in ein Objekt oder Array, wenn du statt eines einzelnen export-Typalias ein benanntes Interface möchtest.

Häufig gestellte Fragen

Was ist der JSON-zu-TypeScript-Konverter?
Es ist ein Tool, das ein JSON-Beispielobjekt oder -array liest und passende TypeScript-Interfaces generiert, indem es den Typ jedes Felds ableitet, sodass du das Ergebnis direkt in deine Codebasis übernehmen kannst.
Wie konvertiere ich JSON in TypeScript-Interfaces?
Füge dein JSON in das Eingabefeld ein, setze optional den Namen des Root-Interface und kopiere oder lade dann die generierten Interfaces aus dem Ausgabe-Panel herunter.
Wie behandelt JSON zu TypeScript Arrays von Objekten?
Es führt die Schlüssel über alle Elemente in einem Interface zusammen. Jeder in einigen Elementen fehlende Schlüssel wird mit einem Fragezeichen als optional markiert, sodass der Typ das ganze Array abdeckt.
Wie werden verschachtelte Objekte in TypeScript konvertiert?
Jedes verschachtelte Objekt wird zu einem eigenen exportierten Interface mit einem PascalCase-Namen, und das übergeordnete Objekt referenziert es per Typ, statt die Form inline einzubetten.
Was passiert mit null- oder gemischttypigen Werten?
Null-Werte erzeugen eine Union mit null, und Felder, die mehr als einen primitiven Typ enthalten, werden zu einer Union wie string | number.
Wird mein JSON irgendwohin gesendet, wenn ich es in TypeScript konvertiere?
Nein. Die JSON-zu-TypeScript-Konvertierung läuft vollständig in deinem Browser, sodass die eingefügten Daten lokal verarbeitet werden und dein Gerät nie verlassen.

Verwandte Tools

  • JSON zu Code — Erzeuge Typen für Go, Rust, Python, Java, Kotlin, C# und TypeScript aus JSON.
  • JSON-Formatierer — JSON verschönern, minimieren und validieren – mit Fehlerposition.
  • JSON zu CSV — Konvertiere ein Array flacher JSON-Objekte in CSV.
  • JSON-Viewer — Text- und einklappbare Baumansicht mit Ein-/Ausklappen und Knotenpfaden.
  • JSON-Baumansicht — Durchstöbere JSON als einklappbaren, typisierten Baum.
  • YAML ↔ JSON — Konvertiere YAML zu JSON und zurück.
  • Testdaten-Generator — Erzeuge gefälschte JSON-Daten: Namen, E-Mails, UUIDs, Daten und mehr.

Weitere JSON-Tools

  • JSON zu CSV — Konvertiere ein Array flacher JSON-Objekte in CSV.
  • JSON escapen / entescapen — Escape Text zu einem JSON-String oder entescape einen JSON-String zu reinem Text.
  • JSON zu Code — Erzeuge Typen für Go, Rust, Python, Java, Kotlin, C# und TypeScript aus JSON.
  • JSON Diff — Vergleiche zwei JSON-Dokumente und sieh einen strukturellen Diff.
  • JSON Schema Generator — Generiere oder validiere ein JSON Schema im Browser.
  • JSON Flatten / Unflatten — Flache verschachteltes JSON zu Schlüsseln in Punktnotation, oder mach es wieder rückgängig.
  • JSON zu Zod — Generiere ein Zod-Schema aus einem JSON-Beispiel mit abgeleiteten Typen.
  • JSON zu Pydantic — Generiere Pydantic-v2-Modellklassen aus einem JSON-Beispiel.
  • JSONPath Evaluator — Teste einen JSONPath-Ausdruck gegen dein JSON und sieh die Treffer live.
  • JSON zu TOON — Konvertiere JSON zu TOON und zurück, um LLM-Prompt-Tokens zu sparen.
  • jq Playground — Führe jq-Filter gegen JSON aus – die echte jq-Engine im Browser.
  • TypeScript zu Mock-Daten — Ein TypeScript-Interface einfügen und realistisches Mock-JSON erzeugen, das dazu passt.

Alle JSON-Tools ansehen (29) · Alle Tools