JSON in TypeScript
JSON-Objekte in TypeScript-Schnittstellen und -Typen umwandeln
Eingabe und Optionen
Schnellvorgaben und Beispiele
Läuft in Ihrem Browser. Ihre Eingaben bleiben auf diesem Gerät.
Ergebnisse
Geben Sie Ihre Werte ein, um das Ergebnis zu sehen.
Kostenloser Online-Konverter von JSON in TypeScript
Unser Konverter von JSON in TypeScript wandelt rohe JSON-Daten in Sekunden in korrekt typisierte TypeScript-Interfaces oder Typaliasse um. Fügen Sie ein beliebiges JSON-Objekt oder -Array ein, klicken Sie auf „Konvertieren“ und erhalten Sie saubere, produktionsreife TypeScript-Definitionen, die Sie direkt in Ihre Codebasis übernehmen können. Das Tool verarbeitet verschachtelte Objekte, Arrays mit gemischten Typen, null-Werte und tief rekursive Strukturen automatisch.
Anpassbare Optionen geben Ihnen volle Kontrolle über die Ausgabe. Wechseln Sie zwischen der Syntax als Interface und als Typalias, markieren Sie alle Eigenschaften als optional, wenden Sie den Modifikator readonly an, fügen Sie export-Schlüsselwörter hinzu und legen Sie einen eigenen Namen für das Root-Interface fest. Verschachtelte Interfaces werden automatisch nach den übergeordneten Schlüsseln benannt und sinnvoll in den Singular gesetzt, sodass aus einem Array „projects“ ein lesbarer Typname wie „Project“ entsteht.
Ob Sie eine REST-API nutzen, ein JavaScript-Projekt nach TypeScript migrieren oder Datenstrukturen für Ihr Team dokumentieren: Dieses Tool für JSON in TypeScript erspart das mühsame manuelle Schreiben von Typen. Alles läuft in Ihrem Browser, Ihre JSON-Daten werden nie auf einen Server hochgeladen, sodass Sie es bedenkenlos mit proprietären API-Antworten und sensiblen Payloads verwenden können.
Hauptfunktionen
- Rekursive Interface-Erzeugung für tief verschachtelte JSON-Objekte
- Intelligente Erkennung von Array-Typen mit automatischer Union-Type-Unterstützung für Arrays mit gemischten Typen
- Wechsel zwischen Interface- und Typalias-Syntax
- Modifikator für optionale Eigenschaften für flexible Typdefinitionen
- Modifikator readonly für unveränderliche Typverträge
- Konfigurierbares export-Schlüsselwort für modulfertige Interfaces
- Eigene Benennung des Root-Interfaces
- Intelligente Benennung verschachtelter Interfaces mit Singularisierung (z. B. wird aus „projects“ „Project“)
- Erzeugten TypeScript-Code mit einem Klick in die Zwischenablage kopieren
- Vorgeladenes Beispiel-JSON mit verschachtelten Objekten, Arrays und null-Werten zum schnellen Testen
So verwenden Sie den Konverter von JSON in TypeScript
- Optionen festlegen: Legen Sie den Namen des Root-Interfaces fest und wählen Sie zwischen Interface und Typ sowie optionalen Eigenschaften, readonly und export-Schlüsselwörtern.
- JSON einfügen: Geben Sie ein JSON-Objekt oder -Array im linken Eingabefeld ein oder fügen Sie es ein. Klicken Sie auf „Beispiel-JSON“, um eine Demo-Payload zu laden.
- Auf „Konvertieren“ klicken: Klicken Sie auf „In TypeScript konvertieren“, um die typisierte Ausgabe im rechten Bereich zu erzeugen.
- Ausgabe prüfen: Sehen Sie sich die erzeugten Interfaces an. Verschachtelte Typen stehen für eine klare Abhängigkeitsreihenfolge über dem Root-Interface.
- In Ihr Projekt kopieren: Klicken Sie auf „Kopieren“, um den TypeScript-Code in die Zwischenablage zu legen, und fügen Sie ihn dann in Ihre .ts- oder .d.ts-Datei ein.
Anwendungsfälle
- REST-APIs nutzen: Fügen Sie eine API-Antwort ein, um TypeScript-Interfaces zu erzeugen, die Ihr Frontend typsicher halten.
- Migration von JavaScript zu TypeScript: Wandeln Sie JSON-Fixtures und Mock-Daten im Rahmen eines Migrationsprojekts in typisierte Definitionen um.
- DTOs fürs Backend erstellen: Erzeugen Sie aus Beispiel-Payloads von Anfragen oder Antworten Typen für Data Transfer Objects in Node.js-Backends.
- API-Dokumentation: Nehmen Sie die erzeugten Interfaces in die API-Dokumentation auf, damit Nutzer die genaue Form der Anfrage- und Antwortdaten kennen.
- GraphQL-Typzuordnung: Verwenden Sie die erzeugten Typen als Ausgangspunkt für Typdefinitionen von GraphQL-Resolvern.
- Testen und Mocking: Erstellen Sie typisierte Mock-Daten-Factories aus echten API-Antworten für Unit- und Integrationstests.
- TypeScript lernen: Lernende sehen, wie JSON-Werte auf TypeScript-Typen abgebildet werden, und entwickeln ein Gespür für das Typsystem.
Häufig gestellte Fragen
Ist dieses Tool kostenlos?
Ja, der Konverter von JSON in TypeScript ist völlig kostenlos, ohne Registrierung und ohne Nutzungslimits. Konvertieren Sie so viele JSON-Payloads, wie Sie brauchen.
Sind meine Daten sicher?
Ja. Die gesamte Konvertierung erfolgt lokal in Ihrem Browser. Ihre JSON-Daten werden nie an einen Server gesendet, sodass Sie proprietäre API-Antworten und interne Datenstrukturen bedenkenlos konvertieren können.
Was ist der Unterschied zwischen Interface und Typalias?
In TypeScript können sowohl Interface als auch Typalias Objektformen beschreiben. Interfaces unterstützen Declaration Merging und werden für öffentliche API-Verträge meist bevorzugt. Typaliasse sind flexibler und können Unions, Intersections und primitive Typen darstellen. Wählen Sie, was zu den Konventionen Ihres Projekts passt.
Kommt es mit Arrays mit gemischten Typen zurecht?
Ja. Enthält ein Array Elemente unterschiedlicher Typen (z. B. Strings und Objekte), erzeugt der Konverter einen Union-Typ wie (string | MyObject)[]. Die Objektformen aller Elemente werden zu einem einzigen umfassenden Interface zusammengeführt.
Kann ich JSON-Arrays auf der Root-Ebene konvertieren?
Ja. Ist Ihr Root-JSON ein Array von Objekten, erstellt der Konverter ein Interface für das Array-Element und einen Typalias für das Root-Array. Enthält das Array nur Primitive, erzeugt er einen einfachen Typalias wie „type RootObject = string[].“
Tipps und bewährte Vorgehensweisen
- Repräsentatives JSON-Beispiel verwenden: Nehmen Sie alle möglichen Felder in Ihr Beispiel auf, damit das erzeugte Interface die vollständige Datenform erfasst.
- Aussagekräftigen Root-Namen wählen: Ändern Sie „RootObject“ in etwas Beschreibendes wie „UserResponse“ oder „ProductData“, um den Code besser lesbar zu machen.
- Optional bei Teildaten aktivieren: Wenn Ihre API je nach Kontext unterschiedliche Felder liefert, markieren Sie Eigenschaften als optional, um Kompilierfehler zu vermeiden.
- readonly für unveränderlichen Zustand nutzen: Aktivieren Sie den Modifikator readonly, wenn die erzeugten Typen einen Zustand darstellen, der nicht verändert werden soll (z. B. Redux-Store-Slices).
- Verschachtelte Namen prüfen: Kontrollieren Sie, ob die automatisch erzeugten Namen verschachtelter Interfaces sinnvoll sind. Benennen Sie sie in Ihrem Code um, falls die Singularisierung unpassende Ergebnisse liefert.
- Mit JSON Schema kombinieren: Für eine vollständige Validierung erzeugen Sie neben den TypeScript-Typen ein JSON Schema, um Daten sowohl zur Laufzeit als auch zur Kompilierzeit zu prüfen.