Leitfaden: JSON zu TypeScript-Typen

Warum JSON in TypeScript-Typen konvertieren

Bei der Frontend-Backend-Zusammenarbeit liegen API-Antworten typischerweise im JSON-Format vor. Das manuelle Schreiben von TypeScript-Schnittstellen ist zeitaufwändig und fehleranfällig, besonders wenn Schnittstellen viele Felder und tiefe Verschachtelung haben. Die automatische Generierung von Typdefinitionen kann:

• Den Aufwand des manuellen Schreibens von Schnittstellen reduzieren
• Tippfehler bei Feldnamen verhindern
• Frontend- und Backend-Typen konsistent halten
• Code-Vervollständigung und Refactoring beschleunigen

Grundlegende Konvertierungsregeln

Einfaches Objekt

{
  "id": 1,
  "name": "Alice",
  "active": true
}

Generiertes Ergebnis:

interface RootObject {
  id: number;
  name: string;
  active: boolean;
}

Typzuordnungsregeln

JSON-Wert	TypeScript-Typ
"hello"	string
42	number
3.14	number
true / false	boolean
null	null
[1, 2, 3]	number[]
{"a": 1}	Verschachtelte Schnittstelle

Verwendung des JSON→TypeScript-Tools

Schritt 1: JSON-Daten abrufen

Kopieren Sie die API-Antwort aus dem Network-Panel der Browser-DevTools oder fügen Sie vorhandene JSON-Daten direkt ein.

Schritt 2: Das Tool öffnen

Navigieren Sie zum JSON→TypeScript-Tool und fügen Sie Ihr JSON in den Eingabebereich ein.

Schritt 3: Generierungsoptionen konfigurieren

• Root-Schnittstellenname: Standardmäßig RootObject; verwenden Sie einen semantischen Namen wie UserInfo
• Export-Modifikator: Wählen Sie interface oder type
• Optionale Felder: Ob Felder mit null-Werten als optional markiert werden (?)
• Readonly-Modifikator: Ob readonly zu allen Feldern hinzugefügt werden soll

Schritt 4: Generieren und Kopieren

Klicken Sie auf die Generierungsschaltfläche. Die TypeScript-Typdefinition erscheint sofort — kopieren Sie sie mit einem Klick in die Zwischenablage.

Behandlung verschachtelter Objekte

Tief verschachteltes JSON wird automatisch in mehrere Schnittstellen aufgeteilt:

{
  "user": {
    "profile": {
      "avatar": "url",
      "bio": "text"
    }
  }
}

Generiert:

interface Profile {
  avatar: string;
  bio: string;
}

interface User {
  profile: Profile;
}

interface RootObject {
  user: User;
}

Es wird empfohlen, generierte Schnittstellen in separate Dateien aufzuteilen, organisiert nach Modul.

Behandlung von Union-Typen

Wenn ein Array Elemente verschiedener Typen enthält:

{
  "items": ["text", 42, true]
}

Generiert das Tool einen Union-Typ:

interface RootObject {
  items: (string | number | boolean)[];
}

Behandlung optionaler Felder

Einige Felder in API-Antworten können fehlen. Gängige Ansätze:

• Wenn ein Feldwert null ist, als optional markieren: bio?: string | null
• Wenn ein Feld fehlt, als optional markieren: bio?: string
• „Null-Felder als optional markieren" im Tool aktivieren, um dies automatisch zu behandeln

In der Praxis: Typen aus einer echten API generieren

1. Browser-DevTools öffnen → Network-Panel
2. Die Ziel-API-Anfrage finden, Rechtsklick → Antwort kopieren
3. In das JSON→TypeScript-Tool einfügen
4. Den Root-Schnittstellennamen festlegen (z. B. ApiResponse)
5. Die generierte Ausgabe in das types/-Verzeichnis des Projekts kopieren

Häufige Probleme

Problem	Ursache	Lösung
Typen zu spezifisch	Aus einer einzelnen Datenprobe abgeleitet	Weitere Datenproben hinzufügen
Verschachtelung zu tief	Komplexe JSON-Struktur	Einige Schnittstellen manuell zusammenführen
Inkonsistente Array-Elementtypen	Arrays mit gemischten Typen	Union-Typen oder Generics verwenden
Datumswerte werden zu string	JSON hat keinen Datumstyp	Manuell in Date-Typ ändern

Fortgeschrittene Tipps

1. JSON vor der Typgenerierung mit dem JSON-Formatierer formatieren
2. Denselben Ansatz mit dem JSON→Go-Tool verwenden, um Go-Structs zu generieren
3. Generierte Schnittstellen mit Zod für Laufzeitvalidierung kombinieren
4. Für große Projekte openapi-typescript verwenden, um aus Swagger zu generieren

Zusammenfassung

Die automatische Generierung von TypeScript-Typen aus JSON ist eine leistungsstarke Methode, um die Entwicklungseffizienz zu steigern. Das JSON→TypeScript-Tool ermöglicht es Ihnen, Typdefinitionen in Sekunden zu erstellen und vermeidet die Mühe und Fehler des manuellen Schreibens. Kombiniert mit den Verschachtelungs- und Optional-Field-Techniken dieses Leitfadens können Sie jedes komplexe Szenario bewältigen.