TypeScript-Fehler string | undefined: Wie man ihn behebt und nicht verrückt wird

Einleitung: «Type 'string | undefined' is not assignable to type 'string'» — ein bekanntes Problem?

Wenn Sie auch nur eine Woche mit TypeScript schreiben, haben Sie diese Meldung mit Sicherheit gesehen. Sie taucht im unerwartetsten Moment auf: Sie sind sicher, dass die Variable ein String ist, aber der Compiler beharrt stur: «Hey, da könnte undefined sein!». Kommt Ihnen das bekannt vor?

Dieser Fehler ist eine der häufigsten Fragen auf Stack Overflow (tausende Aufrufe, dutzende Antworten). Und es liegt nicht daran, dass TypeScript «dumm» ist. Im Gegenteil: Es bewahrt Sie vor Laufzeitfehlern, die Ihre Anwendung zum Absturz bringen könnten. Aber wie erklärt man das dem Compiler? Wie macht man den Code sowohl sicher als auch lesbar?

In diesem Artikel behandeln wir:

\n
• Warum der Fehler Type 'string | undefined' is not assignable to type 'string' auftritt
\n
• 5 funktionierende Methoden, ihn zu beheben (von einfach bis fortgeschritten)
\n
• Typische Anfängerfallen
\n
• Wann man ! (non-null assertion) und wann besser ?? (nullish coalescing) verwendet
\n

Bereit? Los geht's!

1. Warum tritt dieser Fehler in TypeScript auf?

In JavaScript kann eine Variable jederzeit undefined sein. TypeScript, insbesondere mit aktiviertem Flag strictNullChecks, möchte, dass Sie explizit angeben: «Ich weiß, dass hier Leere sein kann, und ich arbeite damit».

Schauen Sie sich dieses einfache Beispiel an:

function getUsername(id: number): string {\n    const user = users.find(u => u.id === id);\n    return user.name; // Fehler! user könnte undefined sein\n}\n

Die Methode find() gibt User | undefined zurück. Wenn der Benutzer nicht gefunden wird, wird undefined zurückgegeben. TypeScript sieht das und schreit: «Du versuchst, string | undefined einem string zuzuweisen! Das geht nicht!».

Das ist kein Bug von TypeScript, sondern eine Funktion. Es zwingt Sie zum Nachdenken: «Was ist, wenn es den Benutzer nicht gibt? Was gibt die Funktion zurück? Einen leeren String? Wirft sie einen Fehler?». Und das ist richtig so.

2. 5 Methoden, den Fehler zu beheben (von einfach bis komplex)

2.1. Non-null assertion Operator (!)

Der schnellste (und gefährlichste) Weg ist, TypeScript zu sagen: «Halt den Mund, ich weiß, was ich tue».

function getUsername(id: number): string {\n    const user = users.find(u => u.id === id);\n    return user!.name; // ! — ich bin sicher, dass user nicht undefined ist\n}\n

Wann verwenden: Nur wenn Sie absolut sicher sind, dass der Wert existiert. Zum Beispiel, wenn Sie diesen Benutzer gerade erst zum Array hinzugefügt haben und genau wissen, dass find ihn finden wird.

Wann NICHT verwenden: In 90% der Fälle. Es ist, als würde man den Airbag im Auto deaktivieren – es funktioniert, aber das Risiko ist enorm.

2.2. Überprüfung mit if (Type Guard)

Der klassische und sichere Weg:

function getUsername(id: number): string {\n    const user = users.find(u => u.id === id);\n    if (user) {\n        return user.name; // TypeScript weiß: Innerhalb des Blocks ist user definitiv User\n    }\n    return 'Gast'; // Fallback\n}\n

TypeScript ist intelligent: Nach der Überprüfung if (user) «verengt» es den Typ. Innerhalb des Blocks ist user ein User, nicht User | undefined.

2.3. Optional Chaining Operator (?.) mit Fallback

Ein eleganter Einzeiler für die Arbeit mit verschachtelten Objekten:

function getUsername(id: number): string {\n    const user = users.find(u => u.id === id);\n    return user?.name ?? 'Gast';\n}\n

Im Detail analysiert:

\n
• user?.name — wenn user undefined ist, wird undefined zurückgegeben, ohne einen Fehler zu verursachen
\n
• ?? 'Gast' — wenn links undefined oder null steht, wird 'Gast' eingesetzt
\