JSON zu TypeScript: Interfaces aus JSON-Beispielen erzeugen

So verwenden Sie es

Fügen Sie einen typischen JSON-Wert in JSON-Beispiel ein. Die Typen erscheinen bei jeder Eingabe.
Tragen Sie unter Name des Wurzel-Interface den Namen für das äußere Objekt ein, etwa Product.
Entfernen Sie den Haken bei export vor jeder Deklaration schreiben, wenn die Typen in derselben Datei bleiben.
Kopieren Sie die TypeScript-Interfaces oder laden Sie sie als types.ts herunter.

So werden die Typen ermittelt

Jedes JSON-Objekt wird zu einem Interface. Sein Name stammt vom Schlüssel, der es enthält, im PascalCase: Der Schlüssel first-name ergibt FirstName. Die Einträge eines Arrays übernehmen den Singular des Array-Schlüssels, daher wird items zu Item. Ist ein Name schon vergeben, wird der Name des übergeordneten Objekts davorgesetzt.

Zeichenketten, Zahlen und Wahrheitswerte werden zu string, number und boolean. null wird in einer Union als null geschrieben, etwa number | null. Ein Array aus Werten wird zu einem Typ mit []. Ein leeres Array wird zu unknown[], weil das Beispiel nicht sagt, was es enthält.

Schlüssel "first-name" -> Eigenschaft "first-name": string;   items -> Item[]

Mehrere Beispiele in einem Array

Eine Liste von Objekten wird als eine einzige Form gelesen. Ein Schlüssel, der in jedem Eintrag vorkommt, ist Pflicht. Ein Schlüssel, der in manchen Einträgen fehlt, wird mit Fragezeichen als optional geschrieben. Ein Schlüssel, der in verschiedenen Einträgen verschiedene Typen enthält, wird zu einer Union, mit string zuerst, dann number, boolean, dem Interface, dem Array und null.

Ein Beispiel zeigt nur die Werte, die es enthält. Ein Schlüssel, den eine echte API manchmal weglässt, fehlt unter Umständen in einem einzelnen Beispiel. Fügen Sie einen zweiten Eintrag mit ihm hinzu, wenn der Typ ihn als optional zeigen soll.

Rechenbeispiel: das Standardbeispiel

Das Standardbeispiel ist ein Objekt mit fünf Schlüsseln. Sein Schlüssel owner enthält ein Objekt, daher hat der Code ein Interface Owner. Sein Schlüssel items ist ein Array aus zwei Objekten, daher hat der Code ein Interface Item. Die Schlüssel sku und price stehen in beiden Einträgen und sind Pflicht. Der Schlüssel discount ist in einem Eintrag null und im anderen eine Zahl, daher ist er number | null. Der Schlüssel note erscheint nur in einem Eintrag und ist optional.

Das Ergebnis hat drei Deklarationen: Root, Owner und Item. Die Anzahl zeigt 3.

Häufig gestellte Fragen

Warum steht bei einem Feld ein Fragezeichen?

Das Feld fehlt in mindestens einem Objekt des Beispiels. Ein solches Feld kann in den echten Daten fehlen, daher behandelt TypeScript es als optional. Code, der es liest, muss es vorher prüfen.

Warum zeigt mein Feld eine Union wie string | number?

In verschiedenen Einträgen hat der Schlüssel verschiedene Typen. Der Typ listet jeden Typ auf, der im Beispiel vorkommt, daher muss der Code prüfen, welchen Typ er hat, bevor er den Wert verwendet.

Prüft der Rechner meine echten API-Daten?

Nein. Er schreibt die Typen des Beispiels, das Sie einfügen. Ein Beispiel mit einem Eintrag zeigt kein Feld, das erst später vorkommt. Nutzen Sie daher nach Möglichkeit eine typische Antwort mit mehreren Einträgen.

Warum stehen manche Eigenschaftsnamen in Anführungszeichen?

Ein Name, der kein einfacher Bezeichner ist, etwa first-name oder 2fa, muss in TypeScript in Anführungszeichen stehen. Gültige Bezeichner werden ohne Anführungszeichen geschrieben.

Kann ich die Ausgabe auch in JavaScript verwenden?

Die Interfaces gibt es nur in TypeScript, beim Kompilieren werden sie entfernt. Ein JavaScript-Projekt braucht deshalb eine andere Prüfung des JSON oder einen TypeScript-Schritt im Build.

Quellen

Zahlen und Text zuletzt geprüft: Dienstag, 10. November 2026.

Ergebnis