BrowserTools
Startseite / Konverter / JSON zu TypeScript

JSON zu TypeScript

Fügen Sie ein Beispiel Ihrer JSON-Daten ein und erhalten Sie passende TypeScript-Typen.

Betreut von BrowserTools · Zuletzt aktualisiert 2026-09-29

JSON zu TypeScript wird geladen… Wenn nichts passiert, aktiviere JavaScript.

TypeScript-Typen für eine API-Antwort von Hand zu schreiben ist mühsam und fehleranfällig, besonders wenn die Daten tief verschachtelt sind oder manche Felder nur ab und zu auftauchen. Fügen Sie ein echtes JSON-Beispiel in dieses Tool ein, und es leitet die Typen schon während der Eingabe ab. Jedes verschachtelte Objekt wird zu einem eigenen, benannten Interface. Der Name stammt vom Schlüssel, unter dem das Objekt steht, umgewandelt in PascalCase: Ein Schlüssel address ergibt ein Interface Address, ein Array projects ergibt ein Interface Project für seine Elemente. Objekte mit genau derselben Form werden nur einmal deklariert und wiederverwendet, und Namen, die untereinander oder mit eingebauten Typen wie Date, Response oder Location kollidieren würden, bekommen einen Zusatz, damit das Ergebnis direkt kompiliert.

Häufig gestellte Fragen

Wie werden verschachtelte Objekte zu Interfaces?
Jedes Objekt mit mindestens einem Schlüssel wird zu einem eigenen, benannten Interface. Der Name kommt vom Schlüssel, der es enthält, umgewandelt in PascalCase: billing_address ergibt BillingAddress. Elemente eines Arrays erhalten die Singularform des Schlüssels, aus orders wird also Order und aus categories wird Category. Das Wurzelobjekt verwendet den Namen, den Sie im Feld Root name eingeben.
Warum ist ein Feld als optional markiert?
Weil es in mindestens einem der Objekte fehlte, die an dieser Stelle zusammengeführt wurden. Wenn Sie ein einzelnes Objekt einfügen, sind alle Felder Pflicht. Bei einem Array von Objekten oder bei JSON Lines bleibt ein Feld nur dann Pflicht, wenn jedes Beispiel es enthält. Mit der Option "Optional instead of | null" werden auch Felder, die manchmal null waren, als optional geschrieben statt | null zu erhalten.
Kann ich JSON Lines oder mehrere Beispiele einfügen?
Ja. Ist der Text kein einzelnes JSON-Dokument, aber jede nicht leere Zeile gültiges JSON, wird er als JSON Lines gelesen, und alle Zeilen werden zu einem Typ zusammengeführt. Bei einem normalen JSON-Array können Sie "Top-level array is a list of samples" aktivieren, damit die Elemente direkt im Wurzeltyp zusammengeführt werden, statt type Root = RootItem[] zu erzeugen.
Was passiert mit leeren Arrays und null-Werten?
Ein Array, das immer leer war, verrät nichts über seine Elemente und wird daher als unknown[] typisiert. Ein Feld, das nur null war, wird als null typisiert. Beide Fälle werden in den Hinweisen unter der Ausgabe aufgeführt. Am besten fügen Sie ein Beispiel ein, in dem diese Felder echte Werte haben, denn das Tool kann nur die Daten beschreiben, die es sieht.
Werden Datumszeichenketten in Date umgewandelt?
Nein. JSON hat keinen Datumstyp, nach JSON.parse ist ein Zeitstempel also weiterhin ein String, und ihn als Date zu typisieren wäre zur Laufzeit falsch. Das Tool belässt ihn als string, nennt in den Hinweisen die Felder, die wie ISO-8601-Datumswerte aussehen, und ergänzt im JSON Schema format date-time oder date.
Sollte ich interface oder type wählen?
Für einfache Objektformen sind beide nahezu gleichwertig. Interfaces lassen sich erweitern und zusammenführen, und viele Styleguides bevorzugen sie für Datenmodelle. type-Aliase werden für Unions gebraucht, und manche Teams verwenden sie der Einheitlichkeit halber. Ist die Wurzel kein Objekt, etwa ein Array oder ein primitiver Wert, ist sie immer ein type-Alias, weil ein Interface so etwas nicht beschreiben kann.
Wofür ist der Reiter JSON Schema?
JSON Schema beschreibt dieselbe Struktur in einem sprachunabhängigen Format, das Validatoren wie Ajv, OpenAPI-Werkzeuge und viele Editoren verstehen. Das erzeugte Schema nutzt Draft 2020-12, legt verschachtelte Objekte in $defs ab und verweist mit $ref darauf, listet Felder, die in jedem Beispiel vorkommen, unter required und unterscheidet integer von number. Nutzen Sie es als Ausgangspunkt und verschärfen Sie es mit Mustern, Enums oder Grenzwerten.
Wird mein JSON an einen Server gesendet?
Nein. Das Einlesen und die Typableitung sind JavaScript, das in Ihrem Browser läuft. Nichts, was Sie einfügen oder öffnen, wird hochgeladen oder gespeichert, Sie können also bedenkenlos echte API-Antworten, Tokens oder personenbezogene Daten verwenden.

Über JSON zu TypeScript

Je mehr Beispiele Sie liefern, desto besser werden die Typen. Fügen Sie ein Array von Datensätzen ein, mehrere JSON-Dokumente im Format JSON Lines (ein Objekt pro Zeile, wie in Logdateien und NDJSON-Exporten), oder aktivieren Sie die Option, die ein Array auf oberster Ebene als Liste von Beispielen behandelt. Das Tool führt alle Werte zusammen, die an derselben Stelle vorkommen: Ein Feld, das in manchen Objekten fehlt, wird optional, ein Feld, das manchmal null ist, bekommt | null (oder wird optional, wenn Ihnen dieser Stil lieber ist), ein Wert, der mal Text und mal Zahl ist, wird zu einer Union, und Arrays mit gemischten Elementen ergeben (A | B)[]. Arrays, die immer leer waren, werden als unknown[] typisiert, Felder, die nur null waren, als null, und beide Fälle stehen in den Hinweisen, damit Sie wissen, was Sie von Hand ergänzen müssen. Schlüssel, die keine gültigen Bezeichner sind, etwa content-type oder 2fa, werden automatisch in Anführungszeichen gesetzt.

Sie bestimmen den Stil der Ausgabe: den Namen des Wurzeltyps, interface oder type-Alias, ob die Deklarationen exportiert werden, readonly-Eigenschaften und -Arrays sowie Semikolons. Ein zweiter Reiter erzeugt aus derselben Ableitung ein JSON Schema (Draft 2020-12), mit verschachtelten Objekten in $defs, required-Listen für Felder, die in jedem Beispiel vorkommen, der Unterscheidung zwischen integer und number und dem Format date-time oder date für Zeichenketten, die wie ISO-8601-Datumswerte aussehen. JSON kennt keinen Datumstyp, daher bleiben diese Felder in TypeScript string. Beide Ergebnisse lassen sich kopieren oder als .ts- bzw. .schema.json-Datei herunterladen. Alles läuft in Ihrem Browser, private API-Antworten und Kundendaten verlassen Ihr Gerät also nie.

Das Typsystem von TypeScript ist Turing-vollständig

TypeScript-Typen sollten eigentlich JavaScript-Werte beschreiben, doch bedingte Typen, rekursive Aliase und Template Literal Types haben den Typprüfer zu einer kleinen eigenen Programmiersprache gemacht. 2017 zeigte ein GitHub-Issue, dass das Typsystem Turing-vollständig ist, und seitdem schreiben Leute Parser, Arithmetik und kleine Interpreter, die vollständig im Compiler laufen und ihre Ergebnisse als Typen liefern.

Die praktische Seite davon ist die strukturelle Typisierung. TypeScript interessiert sich nicht dafür, wie ein Interface heißt, sondern nur für seine Form. Ein Objekt mit den richtigen Feldern erfüllt also auch ein Interface, von dem es nie gehört hat. Deshalb passen aus einem JSON-Beispiel erzeugte Typen so gut: Sie beschreiben die Form der Daten, und jeder Wert mit dieser Form wird akzeptiert.

Verwandte Tools

JSON-Validator

Prüfen Sie, ob JSON gültig ist, sehen Sie genau, wo der Fehler liegt, und formatieren Sie es sauber.

JSON zu CSV

Wandeln Sie JSON-Daten in eine CSV-Datei um, die Sie in Excel oder Google Sheets öffnen können.

JSON zu YAML

Wandeln Sie Daten zwischen JSON und YAML um, in beide Richtungen.

Morsecode-Übersetzer

Wandeln Sie Text in Morsecode um und zurück, und hören Sie ihn als Ton.
Unterstützen