JSON zu TypeScript Interface Generator online

Was das Tool macht

Der JSON-zu-TypeScript-Generator liest ein JSON-Beispiel, etwa eine API-Antwort oder eine Konfigurationsdatei, und schreibt TypeScript-Interfaces, die es beschreiben. Statt jedes Feld von Hand zu tippen, fügen Sie eine echte Antwort ein und erhalten Typen, die Sie direkt im Code verwenden können – für fetch-Ergebnisse, Redux-State oder Testdaten.

Der Generator betrachtet jeden Wert, nicht nur den ersten. Zahlen werden zu number, Text zu string, verschachtelte Objekte bekommen eigene Interfaces, und die Elemente eines Arrays werden zusammengeführt. So wird ein Feld, das nur in manchen Elementen vorkommt, als optional markiert und ein Feld, das manchmal null ist, als nullable typisiert.

So funktioniert es

Fügen Sie JSON in das Eingabefeld ein, laden Sie eine .json-Datei hoch oder klicken Sie auf Beispiel.
Legen Sie den Namen des Wurzeltyps fest und wählen Sie den Stil: interface oder type, null als | null oder als optionale Felder, readonly-Eigenschaften und ob jede Deklaration export erhält.
Kopieren Sie das TypeScript oder laden Sie es als .ts-Datei herunter.

Ungültiges JSON wird mit Zeile und Spalte des Fehlers gemeldet, sodass Sie das Beispiel sofort korrigieren können.

Beispiel

Dieses JSON:

{ "id": 7, "name": "Ada", "tags": ["admin"], "manager": { "id": 1, "email": null } }

wird zu diesen Deklarationen:

export interface Root {
  id: number;
  name: string;
  tags: string[];
  manager: Manager;
}

export interface Manager {
  id: number;
  email: null;
}

Tipps

Ein einzelnes Beispiel zeigt nur, was es enthält. Kann ein Feld ein String oder null sein, nehmen Sie beide Fälle auf oder packen Sie mehrere Beispiele in ein Array, damit sie zusammengeführt werden.
Feldnamen, die keine gültigen Bezeichner sind, etwa first-name, werden in Anführungszeichen geschrieben, damit die Ausgabe immer kompiliert.
Das Ergebnis ist ein Ausgangspunkt. Schränken Sie String-Felder auf Literal-Unions oder Date ein, wenn Sie mehr wissen als das Beispiel.
Brauchen Sie Go? Der JSON-zu-Go-Konverter nutzt dieselbe Ableitung, um Structs mit json-Tags zu schreiben.

FAQ

› Wie werden verschachtelte Objekte behandelt?

Jedes verschachtelte Objekt wird zu einem eigenen benannten Interface, benannt nach seinem Schlüssel in PascalCase, ein Feld address ergibt also ein Interface Address. Objekte mit genau derselben Struktur teilen sich ein Interface, und kollidierende Namen bekommen eine Nummer, etwa Address2.

› Wie werden Arrays typisiert?

Alle Elemente eines Arrays werden zu einem Elementtyp zusammengeführt. Ein Array von Objekten wird zu einem Array eines Interfaces, das nach der Einzahl des Schlüssels benannt ist, aus orders wird also Order[]. Gemischte Arrays werden zu einer Union wie (string | number)[], leere Arrays zu unknown[].

› Wann wird ein Feld als optional markiert?

Wenn es in einigen Objekten eines Arrays fehlt. Ein Feld, das überall vorkommt, aber manchmal null ist, wird standardmäßig als T | null geschrieben. Stellen Sie Null-Werte auf optional, um das null zu entfernen und das Feld mit einem Fragezeichen als optional zu kennzeichnen.

› Soll ich interface oder type wählen?

Beide beschreiben dieselben Objektformen. Interfaces lassen sich erweitern und zusammenführen, und viele Styleguides bevorzugen sie für Objekttypen. Type-Aliase sind praktisch, wenn Sie das Ergebnis mit Unions oder Mapped Types kombinieren wollen. Wählen Sie, was Ihr Code bereits nutzt.

› Wird mein JSON an einen Server gesendet?

Nein. Die Typen werden in Ihrem Browser abgeleitet, Sie können also bedenkenlos echte API-Antworten einfügen.