JSON to TypeScript
export interface Root {
id: number;
name: string;
active: boolean;
tags: string[];
profile: Profile;
}
export interface Profile {
age: number;
city: string;
}Verwandte externe Tools
Einige Links sind Affiliate-Links.
Verwandte Tools
JSON in TypeScript-Typen in einem Schritt umwandeln. Eine API-Antwort oder ein beliebiges JSON-Objekt einfügen und sofort saubere Interfaces oder Typ-Aliase erhalten, mit automatisch behandelten verschachtelten Objekten, Arrays und optionalen Feldern. Alles läuft im Browser, nichts wird hochgeladen.
So wird's benutzt
- JSON in das Eingabefeld einfügen.
- Root-Typ-Name festlegen, interface oder type wählen sowie Umgang mit null-Werten einstellen.
- Den generierten TypeScript-Code ins Projekt kopieren.
Wie Typen abgeleitet werden
Jedes Objekt wird zu einem eigenen Interface, verschachtelte Objekte erhalten eigene benannte Interfaces. Arrays von Objekten werden zu einer einzigen Form zusammengeführt, wobei fehlende Schlüssel optional werden. Null-Werte werden zu einem Nullable-Typ oder, nach Wahl, zu einem optionalen Feld.
Funktionen
Verschachtelte Objekte
Tief verschachteltes JSON wird in klare, separate Interfaces aufgeteilt, die aufeinander verweisen.
Zusammengeführte Array-Formen
Arrays von Objekten werden zu einem Typ zusammengefasst, fehlende Felder werden optional.
Optionale und nullable Felder
Festlegen, ob null-Werte zu einem Nullable-Typ oder einer optionalen Eigenschaft werden.
interface oder type
Benannte Interfaces oder Typ-Aliase ausgeben, passend zum Stil der eigenen Codebasis.
Eigener Root-Name
Den Top-Level-Typ beliebig benennen, z. B. User oder ApiResponse.
Typische Anwendungsfälle
Typisierung von API-Antworten
Beispielantwort einfügen und Typen für die gesamte App erhalten.
Aus Mocks und Fixtures
Typen aus Beispieldaten generieren, damit der Code typsicher bleibt.
Konfigurations- und Datendateien
In Sekunden Typen für JSON-Konfigurations- oder Inhaltsdateien erstellen.
TypeScript lernen
Sehen, wie echtes JSON auf TypeScript-Interfaces und Unions abgebildet wird.
Hinweise und Tipps
- Typen werden aus dem eingefügten Beispiel abgeleitet, daher alle relevanten Felder einschließen.
- Ein leeres Array wird zu unknown[], da kein Element zur Ableitung vorhanden ist.
- Ausgabe auf Unions und optionale Felder prüfen, bevor sie in Produktion eingesetzt wird.
- Alles läuft auf dem Gerät, nichts wird an einen Server gesendet.
Häufig gestellte Fragen
- Werden verschachtelte Objekte unterstützt?
- Ja. Jedes verschachtelte Objekt wird zu einem eigenen benannten Interface und der Elternteil referenziert es per Name.
- Wie werden Arrays typisiert?
- Arrays von Objekten werden zu einem einzigen Interface zusammengeführt; fehlende Schlüssel werden optional. Arrays mit gemischten Primitiven werden zu einer Union wie (string | number)[].
- Wie werden null-Werte behandelt?
- Standardmäßig wird null zu einem Nullable-Typ. Es kann auf Behandlung als optionale Eigenschaft umgestellt werden.
- Soll ich interface oder type verwenden?
- Beide funktionieren; was zur Codebasis passt verwenden. Interfaces sind bei Objektformen üblich, Typ-Aliase sind bei Unions flexibler.
- Wird mein JSON hochgeladen?
- Nein. Der Generator läuft vollständig im Browser. Keine Daten werden an einen Server gesendet und es ist keine Registrierung erforderlich.