Arrays von Objekten

Ein Laden hat viele Gegenstände. Ein Array von Objekten bekommt einen Typ wie jedes andere Array: Gegenstand[] ist ein Array, dessen Elemente alle ein Gegenstand sind. Das lohnt sich, denn ohne ihn kann ein Fehler in einem Element durchrutschen. Hier hat das Seil einen Tippfehler:

const laden = [
    { name: "Heiltrank", preis: 25 },
    { name: "Seil", preiss: 5 },
];

for (const gegenstand of laden) {
    console.log(gegenstand.preis);
}

Das gibt aus:

25
undefined

Kein Fehler! TypeScript hat den Typ des Arrays aus den Elementen abgeleitet, so wie sie sind: Das eine hat einen preis, das andere einen preiss. Es kann nicht wissen, welche Schreibweise richtig ist, und lässt gegenstand.preis durch, als einen Wert, der undefined sein kann. Mit Gegenstand[] sagst du ihm, wie jedes Element aussehen muss:

type Gegenstand = { name: string; preis: number };

const laden: Gegenstand[] = [
    { name: "Heiltrank", preis: 25 },
    { name: "Seil", preiss: 5 },
    { name: "Lampe", preis: "12" },
];

main.ts(5,21): error TS2561: Object literal may only specify known properties, but 'preiss' does not exist in type 'Gegenstand'. Did you mean to write 'preis'?
main.ts(6,22): error TS2322: Type 'string' is not assignable to type 'number'.

Jeder Fehler zeigt mit Zeile und Spalte auf das Element mit dem Problem.

In einer for...of-Schleife über ein Gegenstand[] ist jeder gegenstand ein Gegenstand, TypeScript weiß also, dass gegenstand.preis eine Zahl ist. Du kannst die Preise sorglos addieren, und ein Tippfehler wie gegenstand.preise wird gemeldet: Property 'preise' does not exist on type 'Gegenstand'. Did you mean 'preis'? Auch push prüft ein neues Element: laden.push({ name: "Karte" }) ergibt Property 'preis' is missing in type '{ name: string; }' but required in type 'Gegenstand'.

Und ein Array, das leer beginnt und seine Elemente erst später bekommt, braucht den Typ, wie du aus Lektion 2 weißt: const warenkorb: Gegenstand[] = [];.

Typische Fehler:

• Die [] zu vergessen. const laden: Gegenstand = [...] ergibt Type '{ name: string; preis: number; }[]' is missing the following properties from type 'Gegenstand': name, preis. Mit anderen Worten: Ein Array von Gegenständen ist kein Gegenstand.
• Das Array statt des Elements in der Schleife. summe += laden.preis ergibt Property 'preis' does not exist on type 'Gegenstand[]'. Das Array hat keinen Preis, nur seine Elemente haben einen: gegenstand.preis.