JSON in TypeScript: 5 fatale Fehler beim Casting und wie man sie behebt

Einleitung: Der Mythos der „magischen“ Typumwandlung

Jeder TypeScript-Entwickler stößt früher oder später auf folgende Situation: Sie erhalten JSON vom Server, sind sich seiner Struktur sicher und führen einen einfachen cast mit as durch. Und … nichts funktioniert. Die Methoden der Klasse fehlen, Felder sind undefined, und das Debuggen wird zur Herausforderung.

Die Frage „How do I cast a JSON object to a TypeScript class?“ ist eine der beliebtesten auf Stack Overflow (Zehntausende von Aufrufen). Und das ist kein Wunder. TypeScript ist ein Overlay, das nur während der Kompilierung existiert. Zur Laufzeit ist Ihre „Klasse“ einfach ein plain JavaScript object.

In diesem Artikel analysieren wir die 5 häufigsten und gefährlichsten Fehler, die Entwickler bei der Arbeit mit JSON und TypeScript-Klassen machen. Sie erfahren, wie Sie diese vermeiden, und erhalten fertige Lösungen für Production-Code.

Fehler Nr. 1: Verwendung von as für eine „echte“ Typumwandlung

Die häufigste Falle ist die Annahme, dass die Konstruktion jsonData as MyClass eine Instanz der Klasse erzeugt.

Was passiert wirklich?

Der Operator as (oder die Angle-Bracket-Syntax) ist eine type assertion. Er sagt dem Compiler: „Vertraue mir, ich kenne den Typ.“ Aber in JavaScript führt er keine Magie aus.

class User {\n    name: string = '';\n    greet(): string {\n        return `Hallo, ${this.name}!`;\n    }\n}\n\nconst rawData = JSON.parse('{"name": "Anna"}');\nconst user = rawData as User;\n\nconsole.log(user.name); // "Anna" — funktioniert\nconsole.log(user.greet()); // TypeError: user.greet is not a function\n

Warum? Weil rawData ein gewöhnliches Objekt { name: 'Anna' } ist. Es hat keinen Prototypen User.prototype und daher auch keine Methode greet.

Wie behebt man das?

Erstellen Sie immer eine echte Instanz der Klasse. Die grundlegende Methode ist Object.assign:

const user = Object.assign(new User(), rawData);\nconsole.log(user.greet()); // "Hallo, Anna!"\n

Aber diese Methode hat Nuancen, die wir später besprechen werden.

Fehler Nr. 2: Ignorieren von verschachtelten Objekten und Arrays

Sie verwenden freudig Object.assign, aber Ihre Daten enthalten verschachtelte Strukturen. Und dann beginnt das Chaos.

class Address {\n    city: string = '';\n    zip: string = '';\n}\n\nclass Company {\n    name: string = '';\n    address: Address = new Address();\n}\n\nconst data = JSON.parse('{"name": "TechCorp", "address": {"city": "Moskau", "zip": "101000"}}');\nconst company = Object.assign(new Company(), data);\n\nconsole.log(company.address.city); // "Moskau" — Glück gehabt?\nconsole.log(company.address instanceof Address); // false!\n

Problem: address bleibt ein einfaches Objekt und keine Instanz von Address. Wenn Address Methoden oder computed properties hat, gehen diese verloren.

Lösung: Rekursive Umwandlung

Schreiben Sie eine Factory-Funktion oder verwenden Sie die Bibliothek class-transformer:

import { plainToClass } from 'class-transformer';\n\nconst company = plainToClass(Company, data);\nconsole.log(company.address instanceof Address); // true\n

class-transformer durchläuft rekursiv alle Felder und erstellt basierend auf den @Type-Dekoratoren die korrekten Klasseninstanzen.

Fehler Nr. 3: Verlust von Standardwerten

TypeScript ermöglicht es, Standardwerte für Felder direkt in der Klasse festzulegen. Aber beim „Casting“ von JSON können diese Werte durch undefined überschrieben werden.

class Config {\n    theme: string = 'light';\n    fontSize: number = 14;\n    language: string = 'de';\n}\n\nconst partialData = JSON.parse('{"theme": "dark"}');\nconst config = Object.assign(new Config(), partialData);\n\nconsole.l