Dynamische Objekteigenschaften in TypeScript: Eine Einführung für Anfänger

Wie weist man einem Objekt in TypeScript dynamisch Eigenschaften zu? Verständliche Erklärung für Anfänger

Hallo, Freund! Wenn du jemals in JavaScript programmiert hast und dann zu TypeScript gewechselt bist, bist du sicherlich auf die Situation gestoßen, dass du einem Objekt spontan eine neue Eigenschaft hinzufügen musst. In JS geht das im Handumdrehen: obj.newProp = 'value'. Aber sobald du dasselbe in TypeScript versuchst, meckert der Compiler: "Property 'newProp' does not exist on type ...". Kommt dir bekannt vor?

Keine Sorge, das ist normal. TypeScript schützt uns vor versehentlichen Fehlern, aber manchmal wirkt seine Strenge übertrieben. In diesem Artikel schauen wir uns an, wie man Objekten dynamisch und sicher Eigenschaften zuweist. Du lernst mehrere bewährte Methoden kennen – von einfachen bis zu eleganteren. Los geht's!

Warum meckert TypeScript?

Bevor wir das Problem lösen, lass uns seine Ursache verstehen. TypeScript ist eine Erweiterung von JavaScript, die statische Typisierung hinzufügt. Wenn du ein Objekt deklarierst:

const user = { name: 'Anna', age: 25 };\n

Leitet TypeScript automatisch seinen Typ ab: { name: string; age: number }. Das bedeutet, dass das Objekt user nur diese beiden Eigenschaften enthalten kann. Der Versuch, email hinzuzufügen, führt zu einem Kompilierungsfehler:

user.email = 'anna@example.com'; // ❌ Fehler!\n

TypeScript weiß nicht, dass eine solche Eigenschaft auftauchen könnte, und blockiert den Code. Aber im echten Leben müssen oft dynamisch Eigenschaften hinzugefügt werden – zum Beispiel bei der Arbeit mit Daten aus einer API oder Formularen. Lass uns ansehen, wie man das richtig macht.

Methode 1: Die einfachste – as any

Eine schnelle, aber unsaubere Methode ist die Verwendung von as any. Sie sagt TypeScript buchstäblich: "Schalte die Typprüfung für dieses Objekt aus."

const user: any = { name: 'Anna', age: 25 };\nuser.email = 'anna@example.com'; // ✅ Funktioniert\nuser.isAdmin = true;             // ✅ Funktioniert\n

Warum ist das schlecht? Weil du alle Vorteile von TypeScript verlierst: Autovervollständigung, Typprüfung, Schutz vor Tippfehlern. Wenn du versehentlich user.emial schreibst, gibt es keinen Fehler – du erfährst erst zur Laufzeit davon. Verwende diese Methode nur für schnelles Prototyping oder wenn du genau weißt, was du tust.

Methode 2: Indexsignatur (Index Signature)

Ein korrekterer Ansatz ist, im Voraus zu deklarieren, dass das Objekt dynamische Eigenschaften enthalten kann. Dafür wird die Indexsignatur verwendet.

interface User {\n  name: string;\n  age: number;\n  [key: string]: any; // 👈 Erlaubt beliebige zusätzliche Eigenschaften\n}\n\nconst user: User = { name: 'Anna', age: 25 };\nuser.email = 'anna@example.com'; // ✅ Funktioniert\nuser.phone = '+7-999-123-45-67'; // ✅ Funktioniert\n

Was passiert hier? Der Eintrag [key: string]: any bedeutet: "Das Objekt kann beliebige String-Schlüssel haben, und ihre Werte können von jedem Typ sein." Jetzt kannst du dynamisch Eigenschaften hinzufügen, und TypeScript meckert nicht.

Wichtiger Hinweis: Wenn du die Wertetypen einschränken möchtest, ersetze any durch einen konkreten Typ:

interface User {\n  name: string;\n  age: number;\n  [key: string]: string | number; // Nur Strings und Zahlen\n}\n

Die Indexsignatur ist eine ausgezeichnete Wahl, wenn du im Voraus weißt, dass das Objekt erweitert wird. Aber sei vorsichtig: Wenn das Interface andere Eigenschaften mit anderen Typen hat, müssen auch diese der Signatur entsprechen.

Methode 3: Der Hilfstyp Record

Wenn du ein Objekt erstellen musst, bei dem alle Schlüssel und Werte vom gleichen Typ sind, verwende den eingebauten Typ Record<Keys, Type>. Er ist ideal für Wörterbücher oder Zuordnungen.

type UserRoles = Record<string, 'admin' | 'user' | 'guest'>;\n\nconst roles: UserRoles = {\n  anna: 'admin',\n  ivan: 'user',\n};\