JSON → TypeScript

Ein JSON-Beispiel direkt im Browser in TypeScript-Interfaces oder -Typen umwandeln.

Über JSON → TypeScript

Was es ist

JSON → TypeScript liest ein JSON-Beispiel — eine API-Antwort, eine Konfiguration, Testdaten — und schreibt TypeScript-Deklarationen, die es beschreiben. Verschachtelte Objekte werden zu eigenen benannten Typen, die Formen von Array-Elementen werden zusammengeführt und Felder, die nicht immer vorkommen, als optional markiert. So bekommst du eine typisierte Grundlage, statt alles von Hand zu schreiben.

Hauptfunktionen

  • Deklarationen als interface oder type, mit oder ohne export.
  • Verschachtelte Objekte als eigene benannte Typen oder inline.
  • Array-Elemente unterschiedlicher Form werden zu einem Typ zusammengeführt; ein Feld, das in manchen Elementen fehlt, wird optional.
  • Eigener Name für den Wurzeltyp.
  • Readonly-Felder, alle Felder optional und JSDoc-Beispiele aus den Werten des Beispiels.

So funktioniert es

  1. Füge JSON in den Editor ein, zieh eine Datei darauf oder klick auf „Beispiel“.
  2. Wähle „Interface“ oder „Type“ und leg den Namen des Wurzeltyps fest.
  3. Schalte ein, was du brauchst: verschachtelte Typen auslagern, Readonly-Felder, alle Felder optional, JSDoc.
  4. Kopiere das TypeScript oder schick es an ein anderes Tool weiter.

Wann es hilft

  • Eine API-Antwort typisieren, bevor du sie im Frontend verwendest.
  • Eine Konfigurationsdatei beschreiben, die zur Laufzeit geladen wird.
  • Aus einem echten Payload einen Entwurf von Typen für einen fremden Webhook erstellen.

Datenschutz und Grenzen

Deine Daten

Dein JSON wird im Browser umgewandelt und nicht an einen Server gesendet — die Website erhält nur ein anonymes Ereignis „Tool geöffnet“, ohne Inhalt. Ein Ergebnis, das du an ein anderes Tool schickst, bleibt 24 Stunden auf diesem Gerät unter „Letzte Aktivität“.

Grenzen

  • Die Typen beschreiben nur das Beispiel: Ein Feld, das darin nie vorkommt, steht auch nicht im Ergebnis.
  • Ein Wert, der im Beispiel null ist, wird als null typisiert — trag den echten Typ selbst ein, wenn du ihn kennst.

Häufige Fragen

Soll ich „Interface“ oder „Type“ wählen?

Beide beschreiben dieselbe Form. Interfaces lassen sich erweitern und zusammenführen; type eignet sich für Unions und Aliase. Wenn dein Projekt eine Konvention hat, halte dich daran.

Wie werden Arrays von Objekten behandelt?

Die Formen aller Elemente werden zu einem Typ zusammengeführt. Ein Feld, das in manchen Elementen vorkommt und in anderen fehlt, wird optional — so passt der Typ zu jedem Element.

Warum bekomme ich einen Fehler statt Typen?

Die Eingabe muss gültiges JSON sein. Prüfe sie im JSON-Formatierer, der Zeile und Position des Fehlers zeigt.