256 Tools

JSON to TypeScript

TypeScript-Ausgabe
export interface Root {
  id: number;
  name: string;
  active: boolean;
  tags: string[];
  profile: Profile;
}

export interface Profile {
  age: number;
  city: string;
}
Ausgabe als

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

  1. JSON in das Eingabefeld einfügen.
  2. Root-Typ-Name festlegen, interface oder type wählen sowie Umgang mit null-Werten einstellen.
  3. 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.

JSON wird in ein TypeScript-Interface umgewandeltJSONinterface

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.

Wir verwenden Cookies für Werbung und Analyse.