0Pricing
TypeScript Academy · Lekcja

Nullish coalescing z ??

Stosuj wartości zastępcze tylko dla null i undefined, a nie dla wszystkich wartości falsy

Nullish coalescing z ?? to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej TypeScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs TypeScript Academy zawiera 4 lekcji w sumie.

Operator koalescencji wartości nullish

Operator ?? zwraca prawą stronę tylko wtedy, gdy lewa strona ma wartość null lub undefined. W przeciwnym razie zwraca wartość z lewej strony. Jest to precyzyjny sposób podawania wartości domyślnych.

const name: string | null = null;
const display = name ?? 'Guest';
console.log(display); // 'Guest'

Tylko wartość nullish uruchamia wartość zastępczą

Kluczowe jest pojęcie nullish: tylko null i undefined powodują użycie prawej strony. Każda inna wartość — także wartości fałszywe — zostaje przekazana bez zmian.

console.log(0 ?? 99);       // 0
console.log('' ?? 'x');     // ''
console.log(false ?? true); // false
console.log(null ?? 'def'); // 'def'

Problem z ||

Operator logiczny OR || używa wartości zastępczej dla każdej wartości fałszywej: 0, '', false, NaN, a także wartości nullish. Często prowadzi to do błędów, gdy 0 lub pusty ciąg znaków są poprawnymi danymi wejściowymi.

const count = 0;
console.log(count || 10); // 10 — wrong! 0 is a valid count
console.log(count ?? 10); // 0  — correct

Właściwe ustawianie wartości domyślnych

Należy używać ??, gdy zero, pusty ciąg znaków lub wartość false są poprawnymi wartościami, które mają zostać zachowane. Operator || należy rezerwować dla przypadków, w których każda wartość fałszywa rzeczywiście powinna uruchamiać wartość zastępczą.

function volume(v: number | undefined): number {
  return v ?? 50; // 0 stays 0, undefined becomes 50
}
console.log(volume(0), volume(undefined));

?? z parametrami funkcji

Typowym wzorcem jest podanie wartości domyślnej dla opcjonalnego parametru, gdy przekazano undefined, przy jednoczesnym zachowaniu znaczących wartości fałszywych.

function greet(name?: string): string {
  return 'Hello, ' + (name ?? 'friend');
}
console.log(greet('Ada'), greet());

Typ wyniku operatora ??

Typ wyrażenia a ?? b usuwa null | undefined z typu a i łączy go z typem b. Jeśli a ma typ string | null, a b ma typ string, wynikiem jest string.

const maybe: string | null = null;
const sure: string = maybe ?? 'default';
console.log(sure.toUpperCase());

Łączenie wartości domyślnych

Operatory ?? można łączyć, aby kolejno wypróbowywać kilka źródeł i przechodzić do następnego, gdy wartość jest nullish. Wygrywa pierwsza wartość, która nie jest nullish.

const fromEnv: string | undefined = undefined;
const fromConfig: string | null = null;
const value = fromEnv ?? fromConfig ?? 'hardcoded';
console.log(value);

?? a pierwszeństwo operatorów

Nie można łączyć ?? z || ani && bez nawiasów — TypeScript wymaga ich, aby uniknąć niejednoznaczności. Zawsze należy jawnie grupować takie wyrażenia.

const a: number | null = null;
const b = true;
// const x = a ?? 5 || 10; // Error without parens
const x = (a ?? 5) || 10;
console.log(x);

Rozróżnianie zera od braku wartości

Częsta potrzeba w rzeczywistych zastosowaniach: temperatura, wynik lub saldo o wartości 0 to poprawne dane, natomiast undefined oznacza „nie podano”. Operator ?? zachowuje to rozróżnienie, a || je zaciera.

function format(temp: number | undefined): string {
  return (temp ?? 'N/A') + ' degrees';
}
console.log(format(0), format(undefined));

?? z właściwościami obiektów

Odczytywanie opcjonalnej właściwości i ustawianie dla niej wartości domyślnej to codzienne zastosowanie operatora ??. Naturalnie łączy się on z opcjonalnym łańcuchowaniem, które zostanie wykorzystane w następnej lekcji.

type Opts = { retries?: number };
function run(o: Opts): number {
  return o.retries ?? 3;
}
console.log(run({ retries: 0 }), run({}));

Kiedy wybrać który operator

Reguła wyboru: jeśli 0, '' lub false są poprawnymi wartościami, które trzeba zachować, należy użyć ??. Jeśli rzeczywiście każda wartość fałszywa ma zostać zastąpiona, należy użyć ||. Błędy związane z wartościami domyślnymi niemal zawsze wynikają z używania || z przyzwyczajenia.

const username = '';
console.log(username || 'anon'); // 'anon' — empty replaced
console.log(username ?? 'anon'); // '' — empty kept

Szybkie sprawdzenie

Proszę sprawdzić swoją wiedzę na temat operatora nullish coalescing.

Powtórzenie: operator nullish coalescing

Dowiedzieli się Państwo, że operator ??:

  • Zwraca wartość zastępczą tylko wtedy, gdy lewa strona ma wartość null lub undefined.
  • Zachowuje poprawne wartości falsy, takie jak 0, '' i false — w przeciwieństwie do ||.
  • Usuwa null | undefined z typu wyniku.
  • Wymaga nawiasów, gdy jest używany razem z || lub &&.

Następnie połączymy ?. i ??.

function port(v: number | undefined): number {
  return v ?? 8080;
}
console.log(port(0), port(undefined));

Często zadawane pytania

Czy lekcja „Nullish coalescing z ??” jest bezpłatna?

Tak — pełny tekst „Nullish coalescing z ??” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu TypeScript Academy, przejdź na CoddyKit PRO. Kurs TypeScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Nullish coalescing z ??”?

Stosuj wartości zastępcze tylko dla null i undefined, a nie dla wszystkich wartości falsy Ćwiczysz TypeScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć TypeScript Academy?

Nie wymagamy żadnego doświadczenia. TypeScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Nullish coalescing z ??”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji TypeScript Academy?

Tak. Każda lekcja TypeScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Optional chaining z ?.
  2. Nullish coalescing z ??
  3. Łączenie ?. i ??
  4. Wywołania opcjonalne i dostęp do elementów
← Powrót do TypeScript Academy