Antwort.

Der Non-Null Assertion Operator (!) ist eine spezielle Syntax in TypeScript, die es dem Kompilierer erlaubt, klar zu sagen: "Ich weiß, dass die Variable zu diesem Zeitpunkt nicht null oder undefined ist". Der Operator wurde eingeführt, um typbezogene Probleme in Szenarien zu lösen, in denen der Programmierer sich der Existenz eines Wertes sicher ist, TypeScript dies jedoch aufgrund seiner strengen Analyse nicht garantieren kann.

Hintergrund des Themas

TypeScript geht streng mit der Möglichkeit um, dass Variablen null oder undefined sein können, insbesondere bei aktivierter Option strictNullChecks. Um Warnungen des Kompilierers in Situationen zu vermeiden, in denen der Programmierer von der Sicherheit des Wertes überzeugt ist, wurde die Non-Null Assertion eingeführt.

Problem

TypeScript kann nicht immer alle Codezweige verfolgen und feststellen, dass die Bedingung seltener null nicht erfüllt werden muss. Dies geschieht häufig nach asynchronem Code, in Callbacks und bei der Verarbeitung von DOM-Elementen.

Lösung

Der Non-Null Assertion Operator (!) informiert den Kompilierer über das Fehlen von null/undefined an dieser Stelle, wodurch der Typfehler beseitigt wird.

Beispielcode:

function processUser(user?: {name: string}) {
  // TS gibt einen Fehler ohne den Operator aus: user kann undefined sein
  console.log(user!.name); // Der Operator ! verspricht, dass user definiert ist
}

Wichtige Eigenschaften:

Er beseitigt nur die Kompilierungszeit-Fehlermeldung, beeinflusst nicht die Runtime-Logik.
Er wird ausschließlich dort verwendet, wo die Nicht-Null eines Wertes garantiert ist.
Übermäßiger oder unüberlegter Gebrauch führt zu Laufzeitfehlern.

Fragen mit Hintergedanken.

Kann ! für jeden Wert jeden Typs verwendet werden? Zum Beispiel: let x: number = y!

Der Operator ! hat nur für Typen, die potenziell null/undefined enthalten, aus Sicht des Kompilierers Sinn. Für streng typisierte Variablen ohne Nullable hat er keinen Effekt.

Ersetzt ! die Überprüfung auf null/undefined vollständig? Ist eine Runtime-Prüfung erforderlich?

Nein, der Operator ! führt keine Prüfungen zur Laufzeit durch. Er hilft nur dem Kompilierer, und wenn der tatsächliche Wert undefined/null ist, tritt ein Laufzeitfehler auf.

function foo(data?: string) {
  // kann zu einem Fehler führen
  alert(data!.length);
}

Kann ! vor Fehlern in asynchronem Code schützen, wenn die ursprüngliche Variable in einem anderen Thread geändert wird?

Nein. Der Operator ! funktioniert nur an der Stelle der Anwendung. Wenn zwischen der Überprüfung und der Verwendung der Wert undefined wird, ist ein Fehler unvermeidlich. Man muss sich immer der aktuellen Nicht-Null-Sicherheit sicher sein.

Typische Fehler und Anti-Pattern

Verwendung von ! zur "Unterdrückung" eines Fehlers, wenn man sich nicht der Existenz eines Wertes sicher ist.
Allgegenwärtige Anwendung ohne echtes Verständnis des Kontexts.
Anwendung von ! an Stellen, wo ein erforderlicher Typ oder eine sichere Runtime-Prüfung vorhanden ist.

Beispiel aus dem Leben

Negativer Fall

Innerhalb einer React-Komponente wird über einen Ref ohne vorherige Überprüfung auf den DOM zugegriffen:

const ref = useRef<HTMLDivElement>(null);
ref.current!.focus(); // wenn ref.current null ist, tritt ein Laufzeitfehler auf

Vorteile:

Unterdrückt die Kompilierungsfehler.

Nachteile:

Möglicher kritischer Laufzeitfehler beim Zugriff auf ein nicht existierendes Element.

Positiver Fall

Verwendung einer Existenzprüfung vor der Anwendung:

if (ref.current) {
  ref.current.focus();
}