Arrays von Objekten in TypeScript: Vollständiger Leitfaden mit Beispielen

Arrays von Objekten in TypeScript: Schritt-für-Schritt-Tutorial für alle, die Fehler leid sind

Haben Sie jemals in TypeScript geschrieben und plötzlich eine rote Unterstreichung von Ihrer IDE bekommen, als Sie versucht haben, ein Objekt zu einem Array hinzuzufügen? Kommt Ihnen bekannt vor, oder? Die Frage "How can I define an array of objects?" ist eine der beliebtesten auf Stack Overflow. Und das zu Recht: Ohne korrekte Typisierung von Arrays von Objekten wird Ihr Code zu einer Quelle von Bugs und Kopfschmerzen.

In diesem Tutorial werden wir alle Möglichkeiten zur Definition eines Arrays von Objekten in TypeScript durchgehen – von einfach bis fortgeschritten. Sie erfahren, wie Sie häufige Fehler vermeiden, wie Sie Interfaces verwenden und wie Sie Ihren Code nicht nur funktionsfähig, sondern auch schön gestalten. Los geht's!

Warum funktioniert einfaches [] nicht?

Angenommen, Sie schreiben:

let users = [];

TypeScript interpretiert dies als never[] – ein Array, das niemals Elemente enthalten sollte. Versuchen Sie, ein Objekt hinzuzufügen:

users.push({ name: 'Anna', age: 25 }); // Fehler!

Die IDE wird schreien: "Argument of type '{ name: string; age: number; }' is not assignable to parameter of type 'never'." TypeScript weiß nicht, was Sie im Array speichern möchten, und blockiert daher alle Hinzufügungen.

Die Lösung besteht darin, den Array-Typ explizit anzugeben. Lassen Sie uns alle Varianten durchgehen.

Methode 1: Basis-Typannotation – Eckige Klammern

Der einfachste und intuitivste Weg ist die Verwendung der Syntax Typ[]:

let users: { name: string; age: number }[] = [];\n\nusers.push({ name: 'Anna', age: 25 }); // ✅ Funktioniert\nusers.push({ name: 'Ivan', age: 30 }); // ✅ Funktioniert\n

Hier sagen wir TypeScript: "Hey, das ist ein Array von Objekten, von denen jedes die Eigenschaften name (String) und age (Zahl) hat". Die IDE ist jetzt zufrieden, die Autovervollständigung funktioniert und Typfehler werden zur Kompilierzeit abgefangen.

Nachteil: Wenn die Objektstruktur komplex ist, wird die Beschreibung direkt in der Annotation umständlich. Für solche Fälle wurden Interfaces entwickelt.

Methode 2: Interfaces – Ihr bester Freund

Interfaces ermöglichen es Ihnen, die Objektbeschreibung in eine separate Entität auszulagern und wiederzuverwenden. Das macht den Code sauberer und verständlicher:

interface User {\n  id: number;\n  name: string;\n  age: number;\n  email?: string; // optionale Eigenschaft\n}\n\nlet users: User[] = [];\n\nusers.push({ id: 1, name: 'Anna', age: 25 });\nusers.push({ id: 2, name: 'Ivan', age: 30, email: 'ivan@example.com' }); // ✅\n

Wenn Sie nun versuchen, ein Objekt ohne das Feld id oder mit einem falschen Typ hinzuzufügen, gibt TypeScript einen Fehler aus. Interfaces sind besonders nützlich, wenn derselbe Objekttyp an mehreren Stellen verwendet wird.

Und was ist mit type?

Anstelle von interface können Sie auch type verwenden:

type User = {\n  id: number;\n  name: string;\n  age: number;\n};\n\nlet users: User[] = [];

Der Unterschied zwischen interface und type ist ein Thema für einen separaten Artikel. Für Arrays von Objekten können Sie beide Varianten verwenden, aber interface wird häufiger zur Beschreibung von Objektformen verwendet.

Methode 3: Generische Syntax Array<Type>

Eine alternative Methode ist die Verwendung von Generics:

let users: Array<{ name: string; age: number }> = [];\n\n// Oder mit einem Interface:\nlet users: Array<User> = [];\n

Beide Syntaxen (Type[] und Array<Type>) funktionieren gleich. Die Wahl ist Geschmacks- und Kontextsache. Persönlich bevorzuge ich Type[] für einfache Typen und Array<Type> für komplexe generische Konstrukte. Aber das Wichtigste ist, im Projekt konsistent zu sein.

Methode 4: Erstellen eines Arrays mit initialen Objekten

Oft muss ein Array nicht nur deklariert, sondern auch sofort mit Daten gefüllt werden. TypeScr