Odpowiedź.

Operator asercji Non-Null (!) to specjalna składnia TypeScript, która pozwala jawnie powiedzieć kompilatorowi: "Wiem, że zmienna w tym momencie nie jest równa null ani undefined". Operator został wprowadzony, aby rozwiązać problemy typowe w scenariuszach, gdy programista jest pewien istnienia wartości, ale TypeScript nie może tego zagwarantować z powodu swojej ścisłej analizy.

Historia pytania

TypeScript ściśle odnosi się do możliwości zmiennych bycia null lub undefined, szczególnie przy włączonej opcji strictNullChecks. Aby pozbyć się ostrzeżeń kompilatora w sytuacjach, w których programista jest pewny bezpieczeństwa wartości, wprowadzono asercję non-null.

Problem

TypeScript nie zawsze może śledzić wszystkie gałęzie kodu i zrozumieć, że warunek rzadziej null nie musi być wykonywany. Zdarza się to często po kodzie asynchronicznym, w callbackach, przy przetwarzaniu elementów DOM.

Rozwiązanie

Operator asercji Non-Null (!) informuje kompilator o braku null/undefined w danym miejscu, usuwając błąd typów.

Przykład kodu:

function processUser(user?: {name: string}) {
  // TS zgłosi błąd bez operatora: user może być undefined
  console.log(user!.name); // Operator ! obiecuje, że user jest określony
}

Kluczowe cechy:

Tylko usuwa błąd czasu kompilacji, nie wpływa na logikę runtime.
Używany wyłącznie tam, gdzie gwarantowana jest nie-nullowość wartości.
Nadmiarowe lub nieświadome zastosowanie prowadzi do błędów wykonywania.

Pytania z podstępem.

Czy można używać ! dla każdej wartości dowolnego typu? Na przykład: let x: number = y!

Operator ! ma sens tylko dla typów, które potencjalnie mogą zawierać null/undefined zdaniem kompilatora. Dla ściśle typizowanych zmiennych bez nullable nie daje efektu.

Czy ! całkowicie zastępuje sprawdzanie na null/undefined? Czy potrzebne są sprawdzenia runtime?

Nie, operator ! nie wykonuje sprawdzania w czasie wykonania. Pomaga tylko kompilatorowi i jeśli rzeczywista wartość okaże się undefined/null, wystąpi błąd w czasie wykonania.

function foo(data?: string) {
  // może prowadzić do błędu
  alert(data!.length);
}

Czy ! może uratować przed błędami w kodzie asynchronicznym, jeśli początkowa zmienna zmienia się w innym wątku?

Nie. Operator ! działa tylko w punkcie użycia. Jeśli pomiędzy sprawdzeniem a użyciem wartość stała się undefined, błędu nie da się uniknąć. Zawsze należy być pewnym aktualności nie-nullowości.

Typowe błędy i antywzorce

Używanie ! do "tłumienia" błędu, gdy nie jesteś pewny istnienia wartości.
Powszechne stosowanie bez realnego zrozumienia kontekstu.
Stosowanie ! w miejscach, gdzie typ jest wymagany lub jest pewne sprawdzenie runtime.

Przykład z życia

Negatywny przypadek

Wewnątrz komponentu React uzyskuje się dostęp do DOM przez ref z operatorem ! bez wcześniejszej weryfikacji:

const ref = useRef<HTMLDivElement>(null);
ref.current!.focus(); // jeśli ref.current jest null, wystąpi błąd runtime

Zalety:

Tłumi błąd kompilacji.

Wady:

Możliwy krytyczny błąd czasu wykonania przy odniesieniu się do nieistniejącego elementu.

Pozytywny przypadek

Użycie sprawdzenia istnienia przed zastosowaniem:

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