Warum TypeScript-Interfaces aus JSON generieren
APIs beginnen oft mit JSON. Ein Beispiel kommt aus dem Backend, einem Webhook, einem Test-Endpunkt, einer Dokumentation oder einem Export. Bevor diese Daten in einem TypeScript-Projekt nutzbar sind, brauchen sie eine Form: Felder, verschachtelte Objekte, Arrays, Strings, Zahlen, Booleans und unbekannte Werte.
Ein Interface von Hand zu schreiben ist bei kleinen Objekten in Ordnung. Es wird langsamer, wenn JSON viele Felder, verschachtelte Strukturen oder wiederholte Arrays enthaelt. Ein Generator liefert einen schnellen ersten Entwurf, den Sie pruefen und anpassen koennen.
Nutzen Sie JSON zu Code, um ein JSON-Beispiel einzufuegen und direkt im Browser ein TypeScript-Interface zu erzeugen.
Mit gueltigem JSON beginnen
Das erzeugte Interface ist nur so gut wie das eingefuegte Beispiel. Wenn JSON minifiziert, defekt oder mit fehlenden Klammern kopiert wurde, bereinigen Sie es zuerst.
Oeffnen Sie JSON Formatter, fuegen Sie das Beispiel ein und pruefen Sie, ob es gueltig ist. Formatiertes JSON ist vor der Generierung leichter zu lesen. Sie sehen verschachtelte Objekte, Arrays, null-Werte und Felder, die vielleicht nicht in Ihr App-Modell gehoeren.
Dieser Schritt ist besonders wichtig, wenn JSON aus Logs, Browser-Tools, kopierter Dokumentation, KI-Ausgabe oder schneller Texterkennung stammt.
Einen klaren Root-Namen waehlen
In JSON zu Code legen Sie vor der Generierung einen klaren Klassennamen fest. Fuer TypeScript wird daraus der Name des Hauptinterfaces.
Gute Namen beschreiben das Objekt, nicht nur den Endpunkt:
UserProfileInvoiceSummaryProductSearchResultWebhookEventCourseLesson
Vermeiden Sie vage Namen wie Data, Response oder Result, wenn der Dateikontext nicht eindeutig ist. Klare Modellnamen machen den Code im echten Projekt lesbarer.
Das TypeScript-Interface erzeugen
Fuegen Sie das JSON-Beispiel ein, waehlen Sie den TypeScript-Tab und erzeugen Sie den Modellcode. Das Tool liest die Struktur und erstellt Interfaces fuer das Root-Objekt und verschachtelte Objekte.
Strings werden zu string, ganze und dezimale Zahlen zu number, Booleans zu boolean, Objekte zu eigenen Interfaces und Arrays zu typisierten Arrays anhand des ersten Elements.
Das ist ein nuetzlicher Startpunkt. Es ersetzt keine Pruefung, weil echte API-Daten unregelmaessiger sein koennen als ein einzelnes Beispiel.
Abgeleitete Typen pruefen
Lesen Sie das generierte Interface wie Code, den ein anderer Entwickler geschickt hat.
Pruefen Sie diese Details:
- Kommt eine ID als Zahl oder String?
- Kann ein Feld in manchen Antworten fehlen?
- Kann ein Feld
nullsein, obwohl das Beispiel einen Wert hat? - Haben alle Array-Elemente dieselbe Form?
- Wurden snake_case-Felder in camelCase umgewandelt?
- Sind die Namen verschachtelter Interfaces klar?
Wenn die API created_at sendet, das Interface aber createdAt nutzt, entscheiden Sie, ob Ihr Projekt Feldnamen mappt oder API-Namen exakt behaelt. Generierter Code ist ein Entwurf, nicht automatisch Ihre Projektkonvention.
Arrays vorsichtig nutzen
Viele Generatoren leiten Array-Typen aus dem ersten Element ab. Das ist praktisch, kann aber Randfaelle verstecken. Wenn das erste Element vollstaendig ist und spaetere Elemente Felder nicht enthalten, wirkt das Interface strenger als die reale API.
Testen Sie vor dem Kopieren mit einem realistischen Beispiel. Nutzen Sie optionale Felder, verschachtelte Objekte und Arrays, die echten Antworten entsprechen.
Wenn das Backend eine formale Dokumentation oder ein OpenAPI-Schema hat, ist das die staerkere Quelle. Ein JSON-Beispiel ist eine Abkuerzung, kein Vertrag.
Aenderungen vergleichen
Vielleicht generieren Sie ein Interface, aendern Feldnamen, ersetzen unknown-Typen oder teilen verschachtelte Interfaces in separate Dateien. Nach solchen Aenderungen hilft Diff Checker, die generierte und die bearbeitete Version zu vergleichen.
So sehen Sie genau, was sich geaendert hat, bevor der Code in ein Repository kommt oder mit einem Teammitglied geteilt wird.
Wenn KI ein grosses Modell pruefen soll, kontrollieren Sie vorher die Prompt-Laenge mit KI-Token-Zaehler. Lange JSON-Beispiele und Interfaces koennen groesser werden als erwartet.
Datenschutz-Hinweis
JSON zu Code laeuft im Browser. Ihr JSON wird fuer die Generierung nicht hochgeladen. Das ist praktisch fuer API-Beispiele, interne Testpayloads und schnelle Frontend-Arbeit.
Entfernen Sie trotzdem Geheimnisse, bevor Beispiele in Demos, Dokumentation, Bug-Reports oder KI-Prompts landen. API-Schluessel, E-Mails, Tokens, Kundennamen und private IDs sollten durch Platzhalter ersetzt werden.
Abschluss-Checkliste
Bevor Sie ein generiertes TypeScript-Interface verwenden:
- JSON validieren und formatieren.
- Einen klaren Root-Interface-Namen waehlen.
- Aus einem realistischen Beispiel generieren.
- Strings, Zahlen, Booleans, Arrays und
null-Werte pruefen. - Entscheiden, ob snake_case oder camelCase genutzt wird.
- Die bearbeitete Version vor dem Commit vergleichen.
Fuer einen schnellen ersten Entwurf oeffnen Sie JSON zu Code, fuegen sauberes JSON ein, waehlen TypeScript und pruefen die generierten Interfaces vor der Nutzung in Ihrer App.