MT
My Toolbox

JSON zu TypeScript — Interfaces aus API-Antworten generieren

JSON-Beispiel einfügen und TypeScript-Interfaces oder Type-Aliases mit vollständiger Erkennung verschachtelter Objekte und Arrays erhalten. Keine Anmeldung, kein Server — läuft komplett im Browser.

JSON-Eingabe
TypeScript-Ausgabe

Warum Typen aus JSON generieren?

TypeScripts Stärke ist sein Typsystem, aber Interfaces für API-Antworten manuell zu schreiben ist mühsam und fehleranfällig. Ein Tippfehler in einem Feldnamen erzeugt einen Typ, der nicht zur Realität passt.

Dieses Tool nimmt ein echtes JSON-Beispiel — von Ihrer API, einem Datenbankexport oder der Dokumentation — und generiert präzise TypeScript-Interfaces. Verschachtelte Objekte werden separate benannte Interfaces. Arrays erhalten korrekte Element-Typen.

Der generierte Code ist bereit zum Einfügen in Ihr Projekt. Nutzen Sie ihn als Ausgangspunkt, dann verfeinern: optionale Felder markieren, JSDoc-Kommentare hinzufügen oder Typnamen anpassen.

Anleitung

  1. JSON-Beispiel in den Eingabebereich einfügen. Ein Demo-Beispiel ist vorgeladen.
  2. Root-Typname festlegen (Standard "Root"). Verwenden Sie aussagekräftige Namen wie "UserResponse".
  3. "type statt interface" umschalten für Type-Aliases.
  4. "Felder optional" für ? bei allen Properties (nützlich für partielle Antworten).
  5. TypeScript-Ausgabe aktualisiert sich sofort. Kopieren-Button zum Übernehmen.

Anwendungsfälle

API-Antworten typisieren

Endpoint aufrufen, JSON-Antwort kopieren, hier einfügen. Type-sicheres Interface in Sekunden statt manueller Feldarbeit.

Neues Projekt starten

Frontend für bestehende API? Alle Response-Typen aus Beispieldaten generieren, bevor die erste Komponente geschrieben wird.

JavaScript zu TypeScript migrieren

Funktionierende JS-Anwendung mit console.log-Ausgaben? Diese einfügen und Typen für die Migration generieren.

Dokumentation und Code-Reviews

Interfaces aus API-Doku-Beispielen generieren und mit handgeschriebenen Typen vergleichen.

Tipps

1.

Repräsentative Beispiele verwenden

Antwort mit allen möglichen Feldern einfügen. Bedingte Felder: mehrere Antworten kombinieren oder nach Generierung als optional markieren.

2.

Root-Typ aussagekräftig benennen

Nicht "Root" belassen. "UserProfile", "OrderListResponse" etc. verwenden.

3.

Array-Typen sorgfältig prüfen

Bei gemischten Objekttypen im Array wird ein Union generiert. Das kann auf Dateninkonsistenzen hinweisen.

4.

Generierte Typen sind ein Ausgangspunkt

JSDoc ergänzen, wirklich optionale Felder markieren, Enums für Statuswerte erwägen.

Beispiele

Einfache API-Antwort

Flaches User-Objekt mit Primitiven und Array.

Input

{"id":1,"name":"Jane","email":"jane@example.com","roles":["admin","editor"]}

Output

export interface User {
  id: number;
  name: string;
  email: string;
  roles: Array<string>;
}

Verschachteltes Objekt

Antwort mit verschachteltem profile-Objekt erzeugt separates Interface.

Input

{"id":1,"profile":{"bio":"Ingenieurin","avatar":"https://example.com/img.jpg"}}

Output

export interface User {
  id: number;
  profile: UserProfile;
}

export interface UserProfile {
  bio: string;
  avatar: string;
}

Funktionen

  • Echtzeit-Typgenerierung beim JSON-Bearbeiten
  • Verschachtelte Objekte werden automatisch zu benannten Interfaces
  • Array-Element-Typinferenz mit Union-Unterstützung
  • Umschalten zwischen interface und type alias
  • Optionale-Felder-Modus für partielle Daten
  • Konfigurierbarer Root-Typname

Häufige Fragen

Werden Objekt-Arrays verarbeitet?

Ja. Der Element-Typ wird vom ersten Element abgeleitet und ein benanntes Interface generiert.

Wie werden null-Werte behandelt?

null wird als "null" typisiert. Für "string | null" nach der Generierung manuell ändern.

Kann aus JSON Schema generiert werden?

Dieses Tool arbeitet mit JSON-Beispielen (echte Daten), nicht JSON-Schema-Definitionen. Dafür json-schema-to-typescript verwenden.

Werden Daten an einen Server gesendet?

Nein. Die Konvertierung läuft komplett im Browser mit lokalem JavaScript. Sicher für interne API-Antworten.

Tipps & Verwandte Workflows