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.

JSON zu TypeScript

Erzeuge TypeScript-Interfaces aus einer JSON-Probe.

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.

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

Füge dein JSON-Objekt oder -Array in das Eingabefeld ein.
Setze den Namen des Root-Interface passend zu deinem Modell oder lass ihn als Root.
Prüfe die generierten TypeScript-Interfaces im Ausgabe-Panel.
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.