Wenn find() nichts findet

Um in einem Array nach einer einzelnen Sache zu suchen, hat JavaScript die Methode find(). Sie funktioniert wie filter() aus der Lektion über Funktionen: Du gibst ihr eine Funktion, und sie ruft diese Funktion nacheinander für die Elemente auf. Aber sie gibt kein Array aller Treffer zurück. Sie gibt das erste Element zurück, für das die Funktion true ergibt, und hört auf zu suchen:

type Monster = { name: string; staerke: number };

const monsterListe: Monster[] = [
    { name: "Goblin", staerke: 4 },
    { name: "Wolf", staerke: 7 },
    { name: "Troll", staerke: 15 },
    { name: "Drache", staerke: 40 },
];

const starkes = monsterListe.find(monster => monster.staerke > 10);
console.log(starkes);
const riese = monsterListe.find(monster => monster.staerke > 100);
console.log(riese);

Das gibt aus:

{ name: "Troll", staerke: 15 }
undefined

Der Troll ist das erste Monster, das stärker als 10 ist. Kein Monster ist stärker als 100, also hat die zweite Suche nichts gefunden, und find() hat undefined zurückgegeben.

Deshalb ist der Typ des Ergebnisses nicht Monster, sondern Monster | undefined. Und TypeScript lässt dich es erst als Monster verwenden, wenn du es geprüft hast. Mit demselben Array:

const starkes = monsterListe.find(monster => monster.staerke > 10);
console.log(`Das erste starke Monster: ${starkes.name}`);

main.ts(11,42): error TS18048: 'starkes' is possibly 'undefined'.

Du siehst einen Troll im Array, aber TypeScript schaut nicht auf die Daten: Das Array könnte sich ändern, und die Bedingung auch. In JavaScript würde eine Suche, die nichts gefunden hat, das Programm später mit TypeError: Cannot read properties of undefined (reading 'name') abstürzen lassen, oft weit weg von der Suche selbst. TypeScript zwingt dich, an „nichts gefunden“ genau dort zu denken, wo es passieren kann:

const starkes = monsterListe.find(monster => monster.staerke > 10);
if (starkes === undefined) {
    console.log("Hier ist kein starkes Monster");
} else {
    console.log(`Das erste starke Monster: ${starkes.name}`);
}

Das gibt aus:

Das erste starke Monster: Troll

Auch eine Funktion, die sucht, muss das in ihrem Rückgabetyp sagen. Wenn sie ein Monster verspricht, meldet TypeScript ihr return (wieder unter demselben Array):

function findeMonster(name: string): Monster {
    return monsterListe.find(monster => monster.name === name);
}

main.ts(11,5): error TS2322: Type 'Monster | undefined' is not assignable to type 'Monster'.
  Type 'undefined' is not assignable to type 'Monster'.

Die Lösung ist der ehrliche Rückgabetyp, Monster | undefined. Wer die Funktion aufruft, prüft dann das Ergebnis.

Typischer Fehler: = statt === in der Funktion. monsterListe.find(monster => monster.name = "Wolf") vergleicht nicht: Es benennt das erste Monster in "Wolf" um und gibt es zurück, du bekommst also { name: "Wolf", staerke: 4 }, den umbenannten Goblin. TypeScript meldet das nicht, weil find() jeden Wert als Antwort der Funktion akzeptiert.