JSON zu TypeScript

Neu

TypeScript-Interfaces aus einem JSON-Beispiel erzeugen — mit verschachtelten Typen.

Output

Root name

JSON input

TypeScript output

Runs entirely in your browser. Nothing is uploaded.

JSON mit einem Klick in TypeScript umwandeln

Dieser JSON zu TypeScript Konverter generiert einsatzbereite Interfaces, Typen oder Klassen aus einem JSON-Beispiel, damit Sie nie wieder manuell einen Typ für eine API-Antwort schreiben müssen. Fügen Sie einen Payload links ein und sauber eingerücktes TypeScript erscheint sofort rechts — kopieren Sie es oder laden Sie es als .ts-Datei herunter.

Es ist eine schnelle, kostenlose Alternative ohne Anmeldung: ein einziger JSON zu TypeScript Interface Schritt, der vollständig in Ihrem Browser läuft, mit verschachtelten Objekten, Arrays und Unions, die alle automatisch erkannt werden. Keine Dateigrößenbeschränkungen, keine täglichen Nutzungslimits und nichts verlässt jemals Ihr Gerät.

Interfaces, Typen oder Klassen — Ihre Wahl

Verwenden Sie den Ausgabe-Schalter, um zwischen einem Interface, einem Type-Alias oder einer Klasse zu wechseln. Der Interface-Modus ist der Standard und gibt export interface Root { … } aus; der Type-Modus erzeugt export type Root = { … } für Codebasen, die Aliase bevorzugen; und der Klassen-Modus deklariert die Felder in einem export class. Das gleiche JSON treibt alle drei an, so dass Sie sie mit Ihren eigenen Daten in Sekunden vergleichen können.

Sie können den Root umbenennen, das Schlüsselwort export ein- oder ausschalten, und die Auswahl wird für das nächste Mal gespeichert — was dies zu einem flexiblen TypeScript-Typgenerator anstelle eines Einzel-Format-Konverters macht.

Intelligente Erkennung für verschachtelte Objekte, Arrays und Unions

Die Engine durchläuft Ihr JSON und erstellt ein benanntes Interface für jedes Objekt, benennt verschachtelte Interfaces nach ihren Schlüsseln und singularisiert Array-Elemente — ein orders-Array wird zu Order[]. Identische Formen werden zu einem einzigen Interface dedupliziert, und Arrays gemischter Typen werden zu einer Union wie (string | number)[] zusammengeführt.

Aktivieren Sie die Enum-Erkennung und wiederkehrende String-Werte werden als literale Union erkannt — eine Status-Spalte mit "versendet" und "ausstehend" wird zu "ausstehend" | "versendet" statt einem generischen string. Diese Präzision lässt die Ausgabe handgeschrieben wirken.

Optionale, null und readonly Felder richtig behandelt

Echte API-Daten sind unordentlich, daher behandelt der Konverter sie ehrlich. Wenn Sie eine API-Antwort zu TypeScript konvertieren, werden Schlüssel, die nur in einigen Elementen eines Arrays erscheinen, mit ? als optional markiert, und Sie entscheiden, wie Nulls typisiert werden: entweder als explizite | null-Union beibehalten oder null → optional aktivieren, um zip: string | null in zip?: string umzuwandeln.

Ein readonly-Schalter präfixiert jede Eigenschaft mit dem readonly-Modifikator für unveränderliche Modelle. Zusammen lassen diese Optionen Sie die Strenge Ihres Projekts anpassen, statt gegen die generierten TypeScript-Typen aus JSON anzukämpfen.

Vergleich mit quicktype, json2ts und MakeTypes

quicktype.io ist die umfangreichste Option für mehrsprachige Generierung — es unterstützt Python, Go, C#, Kotlin und viele andere Sprachen neben TypeScript. Diese Breite bedeutet, dass seine TypeScript-Ausgabe manchmal quicktype-Laufzeit-Hilfsfunktionen und zusätzlichen Boilerplate enthält. Es verarbeitet Ihr JSON auch auf seinen Servern, was bei vertraulichen Payloads wichtig ist. json2ts.com ist einfacher und generiert grundlegende Interfaces, fehlt aber Enum-Erkennung, readonly-Unterstützung und Null-Behandlungsoptionen.

MakeTypes generiert TypeScript-Klassen mit Laufzeit-Parsing, was nützlich ist, wenn Sie eingebaute Validierung möchten, aber erheblichen Code-Overhead hinzufügt. Dieser UtiloKit-Konverter generiert reine Typen ohne Laufzeit-Fußabdruck — nur die Interfaces oder Typ-Aliase, die Ihr Code benötigt, vollständig in Ihrem Browser laufend ohne Server-Upload und ohne Konto.

Datenschutz durch Design — Ihr JSON verlässt nie den Browser

Jede Konvertierung erfolgt lokal mit JavaScript in Ihrem Tab. Ihr JSON wird nie auf einen Server hochgeladen, gespeichert oder geteilt — es funktioniert offline und ist sicher für vertrauliche Payloads, interne APIs und Produktionsdaten. Setzen Sie diesen JSON zu TypeScript Konverter als Lesezeichen und verwenden Sie ihn, wann immer Sie schnell Typen benötigen.

Der tolerante Parser akzeptiert sogar JSON-ähnliche Eingaben mit // Kommentaren, abschließenden Kommas und einfach angeführten Strings, sodass Sie ein JavaScript-Objektliteral direkt aus Ihrem Editor einfügen und trotzdem eine gültige Ausgabe erhalten. Kein weiterer Schritt erforderlich.

Frequently asked questions

Wie konvertiere ich JSON in TypeScript?

Fügen Sie Ihr JSON in den Eingabebereich ein (oder drücken Sie Beispiel, um ein Beispiel zu laden) und das passende TypeScript erscheint sofort im Ausgabebereich. Zum Beispiel wird {"id": 1, "name": "Anna"} zu export interface Root { id: number; name: string; }. Klicken Sie auf Kopieren oder Herunterladen .ts, um die Typen direkt in Ihr Projekt einzufügen.

Wie generiere ich ein TypeScript Interface aus JSON?

Lassen Sie die Ausgabe auf Interface (Standard) eingestellt und jedes JSON-Objekt wird zu seinem eigenen export interface. Konfigurieren Sie das Feld Root-Name, um den Namen der obersten Ebene zu steuern. Zum Beispiel erzeugt { "id": 1, "name": "Anna" } mit dem Root-Namen Benutzer: export interface Benutzer { id: number; name: string; }. Verschachtelte Objekte werden automatisch in ihre eigenen benannten Interfaces umgewandelt.

Was ist der Unterschied zwischen einem Interface und einem Typ-Alias?

Beide beschreiben die gleiche Objektform — wählen Sie je nach Codebase-Präferenz mit dem Interface / Type / Class Schalter. Der Interface-Modus gibt export interface Root { … } aus, der mit Declaration Merging erweitert werden kann; der Type-Modus gibt export type Root = { … } aus, der auch Unions und Primitiven ausdrücken kann; der Class-Modus gibt export class Root { … } mit deklarierten Feldern aus.

Wie behandle ich optionale oder null-Felder (? / | null)?

Zwei Schalter steuern dies. 'Optional (?) für fehlende Schlüssel' markiert jede Eigenschaft als optional, die in einigen Elementen eines Objekt-Arrays fehlt. 'null → optional' schreibt ein nullable Feld wie zip: string | null in zip?: string um; deaktivieren Sie es, um die explizite | null Union beizubehalten. Kombinieren Sie beide, um den Null-Behandlungsstil Ihres Teams anzupassen.

Ist es sicher, JSON hier einzufügen?

Ja. Die Konvertierung ist 100% client-seitig: Ihr JSON wird durch JavaScript in Ihrem eigenen Browser-Tab geparst und in TypeScript umgewandelt — es wird nie hochgeladen, protokolliert oder an einen Server gesendet. Sie können die Internetverbindung trennen und das Tool funktioniert weiterhin.

Wie funktioniert die String-Enum-Erkennung?

Aktivieren Sie 'String-Enums erkennen' und eine Spalte wiederholter Strings wie 'versendet' und 'ausstehend' wird als literale Union "ausstehend" | "versendet" erkannt statt als einfaches string. Dies macht die generierten Typen viel präziser und nützlicher.

Kann ich Typen aus einer API- oder Swagger-Antwort generieren?

Ja — fügen Sie eine echte JSON-Antwort Ihrer API ein und das Tool leitet einsatzbereite Interfaces ab, die Sie direkt in Ihre fetch- oder axios-Aufrufe für Autovervollständigung und Typsicherheit einbinden können. Für einen Swagger/OpenAPI-Endpunkt kopieren Sie einen Beispiel-Antwort-Body (das JSON, nicht das Schema-Dokument) und konvertieren Sie diesen.

Add, subtract, multiply matrices and compute determinant, inverse and transpose for 2×2–4×4 matrices.

Daten & Format