Warum JSON in TypeScript konvertieren?

TypeScript verwendet statische Typen, um bugs zur Compile-Zeit statt zur Laufzeit zu erkennen. Wenn Sie mit APIs, Konfigurationsdateien oder externen Datenquellen arbeiten, die JSON zurückgeben, müssen Sie in der Regel Typen oder Interfaces definieren, die die Struktur dieser Daten beschreiben. Diese Definitionen von Hand zu schreiben ist mühsam und fehleranfällig, besonders bei tief verschachtelten Objekten oder großen Arrays mit unterschiedlichen Strukturen. Die automatische Konvertierung spart Zeit und reduziert das Risiko von Abweichungen zwischen Ihren Typen und den tatsächlichen Daten.

Tool-Beschreibung

Dieses Tool nimmt beliebige gültige JSON-Eingaben – Objekte, Arrays oder verschachtelte Strukturen – und generiert sofort entsprechende TypeScript-Typ-Aliase oder Interfaces. Es erkennt automatisch verschachtelte Objekte, erstellt für jedes einen eigenen benannten Typ und verarbeitet Arrays durch Ableitung der Elementtypen. Sie können je nach Projektkonvention zwischen dem Ausgabemodus interface und type wechseln.

Beispiele

Eingabe JSON:

{
  "id": 1,
  "name": "Alice",
  "email": "alice@example.com",
  "address": {
    "street": "123 Main St",
    "city": "Springfield",
    "zip": "62701"
  },
  "roles": ["admin", "editor"]
}

Ausgabe (Interface-Modus):

interface RootObject {
  id: number;
  name: string;
  email: string;
  address: Address;
  roles: string[];
}

interface Address {
  street: string;
  city: string;
  zip: string;
}

Ausgabe (Type-Modus):

type RootObject = {
  id: number;
  name: string;
  email: string;
  address: Address;
  roles: string[];
};

type Address = {
  street: string;
  city: string;
  zip: string;
};

Funktionen

  • Wahl zwischen interface- oder type-Alias-Ausgabe über ein einzelnes Dropdown-Menü
  • Automatische Erkennung und Extraktion verschachtelter Objekttypen
  • Ableitung von Array-Elementtypen, einschließlich Arrays von Objekten
  • Zusammenführung unterschiedlicher Objektstrukturen innerhalb von Arrays zu einem einzigen einheitlichen Typ mit optionalen Eigenschaften
  • Echtzeit-Konvertierung mit syntaxhervorgehobenem JSON- und TypeScript-Editor

Anwendungsfälle

  • Schnelles Definieren von TypeScript-Typen für API-Response-Payloads während der Frontend-Entwicklung
  • Generieren von Typdefinitionen aus JSON-Konfigurationsdateien oder Datenbankexporten
  • Bootstrapping typsicherer Datenmodelle beim Start eines neuen TypeScript-Projekts

Funktionsweise

Das Tool parst gültiges JSON und durchläuft die Struktur rekursiv. Für jedes gefundene Objekt erstellt es ein benanntes Interface oder einen Typ-Alias mit Feldern, die den Schlüsseln des Objekts entsprechen. Verschachtelte Objekte erzeugen zusätzliche Typen, die namentlich referenziert werden. Arrays werden analysiert, um den Elementtyp zu bestimmen – wenn alle Elemente Objekte sind, werden ihre Strukturen zu einem einzigen Typ zusammengeführt, bei dem Schlüssel, die nicht in jedem Element vorhanden sind, optional werden.

Tipps

  • Fügen Sie ein repräsentatives Beispiel Ihrer JSON-Daten ein. Je vollständiger das Beispiel, desto genauer werden die generierten Typen sein.
  • Fügen Sie bei Arrays mit unterschiedlichen Objektstrukturen mehrere Objekte ein, damit das Tool optionale Felder erkennen kann.
  • Verwenden Sie den Type-Modus, wenn Ihr Projekt Typ-Aliase für Objektstrukturen bevorzugt, oder den Interface-Modus, wenn Sie der Interface-Konvention folgen.