JSON in TypeScript

So funktioniert es

Um API-Daten in TypeScript typisiert zu nutzen, brauchen Sie ein Interface für die Antwort; von Hand dauert das lange, und ein Feld ist schnell vergessen. Fügen Sie eine Beispielantwort links ein und geben Sie einen Namen für den Wurzeltyp ein (etwa Kunde); die Deklarationen erscheinen rechts. Jedes verschachtelte Objekt bekommt ein eigenes Interface: Das Feld adresse wird zum Typ Adresse. Ein Array aus Objekten wird nach der Einzahl benannt, wenn sie sich bilden lässt ("items" → Item[]); bei deutschen Pluralen wie "positionen" heißt der Typ PositionenItem. Beginnt das JSON mit einem Array, beschreibt der Wurzeltyp ein Element, und eine Zeile RootList = Root[] kommt hinzu. Alle Einträge eines Arrays werden zu einem Typ zusammengeführt: Ein Feld, das in einem Eintrag fehlt, wird mit ? markiert (email?: string), ein Feld, das irgendwo null war, bekommt | null (letzte_bestellung: string | null). Zeigt ein Feld verschiedene Typen, entsteht eine Union (string | number). Eigenschaftsnamen sind genau die JSON-Schlüssel, denn ein TypeScript-Typ kann Daten nicht umbenennen: voller_name bleibt voller_name, ein Name wie "voller-name" steht in Anführungszeichen. Ein leeres Array hat keinen bekannten Elementtyp und wird unknown[].

Dieses Werkzeug ist auch als json in typescript umwandeln, json to typescript, typescript interface aus json erzeugen, json to ts interface, json in typescript typ bekannt.

Was ist TypeScript-Interface?

Ein Interface beschreibt in TypeScript, welche Felder ein Objekt hat und welchen Typ sie besitzen: interface Adresse { ort: string; plz: string; }. Der Compiler erkennt damit falsch geschriebene Feldnamen, fehlende Felder und Typfehler, bevor der Code läuft. Die Deklaration wird beim Kompilieren entfernt und steht nicht im JavaScript; zur Laufzeit prüft sie also keine Daten, sie warnt nur den Entwickler.

Was ist Optionales und nullbares Feld?

Ein optionales Feld (email?: string) kann im Objekt ganz fehlen; beim Lesen ergibt es undefined. Ein nullbares Feld (letzte_bestellung: string | null) ist immer vorhanden, sein Wert kann aber null sein. Im JSON sehen beide verschieden aus: Einmal fehlt der Schlüssel, einmal steht "letzte_bestellung": null da. Das Werkzeug kennzeichnet beide getrennt, weil der Code sie mit unterschiedlichen Prüfungen behandeln muss.

Was ist der Unterschied zwischen interface und type in TypeScript?

Beim Beschreiben von Objektformen liefern interface und type meist dasselbe Ergebnis. Ein interface wird mit extends erweitert, und eine zweite Deklaration gleichen Namens verschmilzt mit der ersten; praktisch, um Bibliothekstypen um Felder zu ergänzen. Ein type kann Unions (string | number), Schnittmengen und Aliase ausdrücken, lässt sich aber nicht zweimal unter einem Namen deklarieren. Für API-Antworten eignen sich beide; nehmen Sie, was der Codestil Ihres Teams schon verwendet.

Fehlende Felder, null und Unions: wie der Typ entsteht

Das Werkzeug schließt aus einem einzigen Beispiel; je mehr Varianten das Beispiel zeigt, desto genauer der Typ. Einträge eines Arrays werden zusammengeführt, und für jedes Feld gibt es zwei getrennte Fragen: Ist es in jedem Eintrag vorhanden, und war es je null? Lautet die erste Antwort nein, ist das Feld optional (?); lautet die zweite ja, kommt | null dazu. Das sind verschiedene Aussagen: email?: string heißt, das Feld kann ganz fehlen; letzte_bestellung: string | null heißt, es kommt immer, kann aber leer sein.

Zeigt ein Feld verschiedene Typen, wird eine Union geschrieben: Ein Feld, das einmal 5 und einmal "5" ist, wird string | number. Das deutet meist auf eine Unstimmigkeit in der API hin; prüfen Sie die API-Dokumentation, bevor Sie den Typ einengen. Ein Feld, das nur null war, hat keinen bekannten Typ und wird als null geschrieben.

• [{"a":1},{"b":2}] → a?: number; b?: number;
• {"x": null} und {"x": "y"} → x: string | null
• {"n": 5} und {"n": "5"} → n: string | number
• {"voller-name": "x"} → "voller-name": string

interface oder type, und ehrliche Grenzen

Zum Beschreiben von Objektformen leisten beide dasselbe. Ein interface lässt sich mit extends erweitern und verschmilzt mit einer zweiten Deklaration gleichen Namens, was beim Ergänzen von Bibliothekstypen hilft. Ein type teilt die Schreibweise mit Unions (A | B), Schnittmengen und Aliasen; schreibt Ihr Team alles mit type, wählen Sie das. In beiden Fällen beginnt die Ausgabe mit export und lässt sich aus anderen Dateien importieren.

Ehrliche Grenzen: Datumstexte ("2026-09-20") werden nicht zu Date und feste Wertelisten ("aktiv" | "inaktiv") nicht zu Literal-Unions; sie bleiben string, engen Sie sie von Hand ein. Zwei verschachtelte Objekte gleicher Form können zweimal unter verschiedenen Namen erscheinen. Ein TypeScript-Typ prüft Daten nicht zur Laufzeit; wollen Sie sicher sein, dass eine API diese Form liefert, brauchen Sie eine Prüfbibliothek wie zod.

Häufige Fragen

Wie erstelle ich ein TypeScript-Interface aus JSON?

Fügen Sie Beispiel-JSON links auf dieser Seite ein und geben Sie den Namen des Wurzeltyps ein. Rechts erscheinen TypeScript-Deklarationen mit export, mit einem eigenen Interface für jedes verschachtelte Objekt. Kopieren Sie den Code in eine .ts-Datei Ihres Projekts und typisieren Sie damit die Daten.

Was bedeuten Felder mit Fragezeichen (?)?

Dieses Feld fehlt in manchen Einträgen des Arrays. In TypeScript sagt ?, dass das Feld fehlen kann; Sie müssen es vor der Verwendung prüfen. Sind Sie sicher, dass das Feld immer vorhanden ist, stellen Sie Fehlende Felder auf Pflicht; dann wird kein ? gesetzt.

Warum werden die Eigenschaftsnamen nicht in camelCase umgewandelt?

Ein TypeScript-Typ ändert die Daten nicht, er beschreibt nur ihre Form. Heißt der JSON-Schlüssel voller_name, muss auch die Eigenschaft im Typ voller_name heißen, sonst erwartet der Compiler ein Feld, das es in den echten Daten nicht gibt. Andere Namen vergeben Sie im Code, der die Daten liest.

Wird das eingefügte JSON an einen Server gesendet?

Nein. Die Typermittlung und das Schreiben des TypeScript-Codes laufen vollständig in Ihrem Browser; selbst eine Beispielantwort mit Kundendaten verlässt diese Seite nicht. Nach dem Laden funktioniert die Seite auch offline.