TypeScript-Typen aus echten Daten
Interfaces für eine API-Antwort von Hand zu schreiben dauert lange, und bei einem Feld vertut man sich schnell. Dieses Tool liest ein Beispiel-JSON und erzeugt die TypeScript-Typen, die es beschreiben.
Jedes verschachtelte Objekt erhält ein eigenes Interface mit einem Namen, der aus seinem Schlüssel abgeleitet wird (address → Address). Bei Listen von Objekten werden alle Einträge zu einem einzigen Typ zusammengeführt: Fehlt ein Schlüssel in manchen Einträgen, wird er mit „?“ als optional markiert, und hat ein Feld Werte unterschiedlichen Typs, entsteht eine Union wie string | number. Identische Typen werden nur einmal deklariert.
Sie können den Namen des Haupttyps festlegen, zwischen interface und type wählen und entscheiden, ob export hinzugefügt und die Eigenschaften als readonly markiert werden sollen.
So erzeugen Sie TypeScript-Typen aus JSON
- Fügen Sie ein Beispiel-JSON ein, etwa die Antwort Ihrer API.
- Geben Sie den Namen des Haupttyps ein (standardmäßig „Root“).
- Wählen Sie interface oder type und ob Sie export und readonly möchten.
- Klicken Sie auf „TypeScript erzeugen“ und kopieren Sie den Code oder laden Sie die .ts-Datei herunter.
Wann Sie es brauchen
- Die Antwort einer REST-API in einem React-, Angular-, Vue- oder Node-Projekt typisieren.
- Typen für eine JSON-Konfigurationsdatei erstellen.
- Die Form der Daten dokumentieren, die zwei Dienste austauschen.
- Die Modelle eines neuen Projekts auf Basis von Beispieldaten anlegen.
Häufig gestellte Fragen
Wie wird entschieden, welche Felder optional sind?
Bei Listen von Objekten ist ein Schlüssel, der in allen Einträgen vorkommt, Pflicht, und einer, der in mindestens einem fehlt, optional (?). Bei einem einzelnen Beispielobjekt sind alle Felder Pflicht; um optionale Felder zu erkennen, fügen Sie eine Liste mit mehreren Beispielen ein.
Welchen Typ erhalten null und leere Listen?
Ein null-Wert wird als null typisiert (oder mit dem Typ aus anderen Beispielen vereint, etwa string | null). Eine leere Liste wird zu unknown[], da es keine Beispiele gibt, aus denen sich ihr Inhalt ableiten ließe.
Werden die Daten zur Laufzeit validiert?
Nein. TypeScript-Typen existieren nur beim Kompilieren. Wenn Sie zur Laufzeit validieren müssen, verwenden Sie auf Basis dieser Typen eine Bibliothek wie Zod.
Werden meine Daten an einen Server gesendet?
Nein. Alles wird mit JavaScript in Ihrem Browser verarbeitet. Der eingefügte Text und die geöffneten Dateien verlassen Ihr Gerät nicht, Sie können also bedenkenlos auch interne Daten oder Kundendaten verwenden.
Ist das kostenlos?
Ja. Sie können das Tool kostenlos mit einem Dokument testen (eingefügt oder eine Datei) und die Optionen dabei so oft ändern, wie Sie möchten; Versuche mit Fehlern verbrauchen den Test nicht. Für unbegrenzte Nutzung und die Verarbeitung mehrerer Dateien auf einmal kostet ToolStudio Pro 1,99 € pro Monat und enthält alle Tools.