So generieren Sie TypeScript aus JSON
- Fügen Sie ein JSON-Beispiel ein. Je mehr Einträge seine Arrays enthalten, desto besser werden optionale Felder und Unions erkannt.
- Legen Sie den Namen des Wurzeltyps fest und wählen Sie
interfaceodertype, mit oder ohneexportundreadonly. - Kopieren Sie den TypeScript-Code in Ihr Projekt oder laden Sie ihn als
.ts-Datei herunter.
So werden TypeScript-Typen aus JSON abgeleitet
| JSON | TypeScript |
|---|---|
"Ada" | string |
42, 3.14 | number |
true | boolean |
null neben anderen Werten | eine Union wie string | null |
"address": {"city": "Paris"} | ein eigenes interface Address |
"users": [{"id": 1}] | User[] – der Name des Eintrags wird in den Singular gesetzt (nach englischen Pluralregeln) |
| ein Schlüssel, der in manchen Array-Einträgen fehlt | eine optionale Eigenschaft key?: |
[1, "a"] | (string | number)[] |
[] | unknown[] |
{} | Record<string, unknown> |
Beispiel
Das JSON {"id": 1, "name": "Ada", "tags": ["admin"], "manager": null} wird zu:
export interface Root { id: number; name: string; tags: string[]; manager: null; }
Benennen Sie Root in etwas Aussagekräftiges um, etwa User oder ApiResponse. Verschachtelte Objekte mit exakt gleicher Struktur – zum Beispiel eine Rechnungs- und eine Lieferadresse – teilen sich ein Interface, und Schlüssel, die keine gültigen Bezeichner sind, werden in Anführungszeichen gesetzt, z. B. "first-name": string.
Häufig gestellte Fragen
Interface oder Type – was sollte ich wählen?
Für Objektstrukturen verhalten sich beide gleich. Interfaces lassen sich erweitern und zusammenführen, Type-Aliase können zusätzlich Unions beschreiben. Viele Teams verwenden Interfaces für Objekte; richten Sie sich nach dem Stil Ihrer Codebasis.
Wie werden optionale Felder erkannt?
Objekte innerhalb desselben Arrays werden zusammengeführt. Ein Schlüssel, der in einigen davon fehlt, wird optional (key?:), und ein Schlüssel mit unterschiedlichen Werttypen wird zur Union.
Werden die Daten damit zur Laufzeit validiert?
Nein. TypeScript-Typen verschwinden, sobald der Code ausgeführt wird. Um eingehende Daten zu prüfen, erzeugen Sie mit unserem JSON Schema Generator aus demselben Beispiel ein JSON Schema und validieren Sie dagegen mit einer Schema-Bibliothek.
Wird mein JSON an einen Server gesendet?
Nein. Die Typen werden in Ihrem Browser generiert – Sie können also bedenkenlos auch vertrauliche API-Antworten einfügen.