JSON zu TypeScript
JSON in TypeScript-Interfaces umwandeln und Typdefinitionen generieren
JSON-Eingabe
TypeScript-Ausgabe
Was ist JSON zu TypeScript?
Sie bauen eine React- oder Angular-App, haben eine JSON-API-Antwort vor sich und müssen ein TypeScript-Interface dafür definieren. Das manuell für eine tief verschachtelte Antwort zu schreiben ist mühsam und fehleranfällig — ein falscher Typ und Ihr Editor hört auf, Bugs zu fangen. Dieses Tool leitet TypeScript-Interfaces direkt aus Ihrer JSON-Struktur ab, damit Sie die Antwort einfügen und in Sekunden einsatzbereite Typdefinitionen erhalten.
JSON einfügen, TypeScript erhalten. Das Tool läuft in Ihrem Browser. Nichts wird an einen Server gesendet. Die Ausgabe folgt der Standard-TypeScript-Syntax.
So verwenden Sie dieses Tool
JSON einfügen
Fügen Sie Ihr JSON in den linken Editor ein oder laden Sie eine Datei hoch. Nutzen Sie Beispiel für Beispieldaten. Der Generator leitet Typen aus der Struktur ab. Verwenden Sie repräsentative Daten mit allen relevanten Feldern.
Interfaces prüfen
Das rechte Panel zeigt generierte Interfaces. Verschachtelte Objekte erhalten eigene Interfaces. Arrays werden als Type[] typisiert. Optionale Felder können je nach Implementierung ? verwenden.
Kopieren oder Herunterladen
Nutzen Sie Kopieren oder Herunterladen, um den TypeScript-Code zu erhalten. Fügen Sie ihn in Ihr Projekt ein. Möglicherweise müssen Sie Namen anpassen, Generics hinzufügen oder optionale Felder korrigieren. Zum Validieren des JSON zuerst den JSON Validator verwenden.
Wann JSON zu TypeScript hilft
Bei der API-Integration brauchen Sie oft Typen für die Response-Payload. Ein Beispiel-Response hier einzufügen liefert Interfaces für Ihr Angular-, React- oder Node-Projekt. Konfigurationsdateien, Webhook-Payloads und Datenbankdokumente profitieren ebenso. Interfaces für komplexe verschachtelte Strukturen manuell zu schreiben ist fehleranfällig; dieses Tool leitet die Struktur aus Ihrer Stichprobe ab. Für schema-basierte Generierung nutzen Sie den JSON Schema Generator und Tools wie quicktype.
Beispiele: JSON zu TypeScript
Hier ein Beispiel für die Generierung von TypeScript-Interfaces aus einem JSON-Objekt.
Beispiel: Teilnehmerdatensatz
JSON-Eingabe:
Generierte TypeScript-Ausgabe:
Einschränkungen
Der Generator leitet aus der Stichprobe ab. Wenn ein Feld string | number sein kann, Ihr Sample aber nur Strings enthält, wird der Typ string sein. Bei leeren Arrays kann der Elementtyp unknown sein. Prüfen und bearbeiten Sie die Ausgabe. Für schema-basierte Generierung nutzen Sie den JSON Schema Generator und ein Tool wie quicktype.
Häufig gestellte Fragen
Wie generiere ich TypeScript-Interfaces automatisch aus JSON?
JSON in dieses Tool einfügen und es generiert TypeScript-Interfaces basierend auf der Struktur. Verschachtelte Objekte erhalten eigene Interfaces, Arrays werden als Type[] typisiert. Ausgabe in Ihr Angular-, React- oder Node-Projekt kopieren.
Was ist der Unterschied zwischen TypeScript interface und type für JSON?
Beide funktionieren gut. interface ist bevorzugt, wenn Sie erweitern oder implementieren müssen; type ist besser für Union-Typen und gemappte Typen. Für die meisten API-Response-Formen funktioniert beides — der Generator gibt standardmäßig interface aus.
Werden meine Daten irgendwohin gesendet?
Nein. Alles läuft in Ihrem Browser — Ihr JSON verlässt niemals Ihren Rechner. Sicher auch mit Produktions-API-Responses.
Kann ich Typen für andere Sprachen generieren?
Dieses Tool gibt nur TypeScript aus. Die Seite hat Konverter für C#, Java, Python, Go und andere.
Was ist mit optionalen Feldern und Enums?
Der Generator leitet Typen aus Ihrem Sample ab. Felder, die optional sein könnten, werden nicht automatisch mit ? markiert — prüfen Sie die Ausgabe und fügen Sie ? bei Bedarf hinzu. Für Enums: Wenn ein Feld konsistent bestimmte String-Werte verwendet, können Sie string durch eine Union wie "aktiv" | "inaktiv" ersetzen.
Verwandte Tools
Für TypeScript siehe typescriptlang.org und TypeScript-Objekte. Für JSON siehe json.org und MDN JSON. Für Schema-zu-Code-Generierung siehe quicktype. Für RFC 8259 (JSON-Spezifikation).