TypeScript Academy · Lekcja

Łączenie ?. i ??

Łącz optional chaining z rozsądnymi wartościami domyślnymi

Łączenie ?. i ?? to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 3 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.

Idealne połączenie

Optional chaining i nullish coalescing zostały zaprojektowane do wspólnego użycia. Wzorzec obj?.value ?? fallback bezpiecznie odczytuje zagnieżdżoną wartość i dostarcza wartość domyślną, jeśli jej brakuje. To jeden z najbardziej użytecznych idiomów we współczesnym TypeScript.

type User = { profile?: { name?: string } };
const u: User = {};
const name = u.profile?.name ?? 'Anonymous';
console.log(name);

Jak działa ten wzorzec

Najpierw ?. oblicza łańcuch, zwracając wartość albo undefined. Następnie ?? sprawdza wynik: jeśli jest nullish, używana jest wartość zapasowa. Dwa operatory, jedno przejrzyste wyrażenie.

type Cfg = { server?: { port?: number } };
const cfg: Cfg = { server: {} };
const port = cfg.server?.port ?? 8080;
console.log(port);

Typ wyniku

Łańcuch zwraca typ T | undefined; operator ?? usuwa undefined i dołącza typ wartości zapasowej jako unię. Jeśli wartość zapasowa ma pasujący typ, końcowy typ to po prostu T — nie pozostaje już żadne undefined do obsłużenia.

type Cfg = { timeout?: number };
const cfg: Cfg = {};
const timeout: number = cfg.timeout ?? 30;
console.log(timeout + 5); // number, safe arithmetic

Zachowywanie prawidłowych wartości falsy

Ponieważ ?? reaguje tylko na wartości nullish, prawidłowa wartość 0 odczytana za pomocą łańcucha zostaje zachowana. Wartość zapasowa jest używana tylko wtedy, gdy właściwości rzeczywiście brakuje.

type Audio = { settings?: { volume?: number } };
const a: Audio = { settings: { volume: 0 } };
console.log(a.settings?.volume ?? 50); // 0, not 50

Dostęp do głęboko zagnieżdżonej konfiguracji

W przypadku głęboko zagnieżdżonej konfiguracji można połączyć wiele kroków ?. i zakończyć je pojedynczym ??. Brak dowolnego elementu pośredniego powoduje bezpieczne użycie wartości domyślnej.

type Cfg = { db?: { pool?: { max?: number } } };
const cfg: Cfg = { db: {} };
const maxPool = cfg.db?.pool?.max ?? 10;
console.log(maxPool);

Wartości domyślne odpowiedzi API

Odpowiedzi API często nie zawierają opcjonalnych pól. Połączony wzorzec odczytuje je w bezpieczny sposób i zastępuje rozsądnymi wartościami domyślnymi, dzięki czemu dalszy kod pozostaje prosty i nie powoduje awarii.

type Res = { data?: { items?: string[] } };
const res: Res = { data: {} };
const items = res.data?.items ?? [];
console.log('Item count:', items.length);

Łączenie z wynikami metod

Można tworzyć łańcuchy na podstawie wywołań funkcji lub metod i ustawiać dla ich wyników wartości domyślne. Jeśli wywołanie zwróci wartość nullish, zostanie użyta wartość zapasowa.

type Store = { find?: () => string | undefined };
const store: Store = { find: () => undefined };
const result = store.find?.() ?? 'default';
console.log(result);

Unikanie rozwlekłych warunków ochronnych

Przed wprowadzeniem tych operatorów trzeba było pisać wielowierszowe sprawdzenia wartości null. Połączony idiom zastępuje cały blok pojedynczym wyrażeniem, poprawiając czytelność bez utraty bezpieczeństwa.

type User = { name?: string };
const u: User = {};
// Old: let n; if (u && u.name) n = u.name; else n = 'Guest';
const n = u?.name ?? 'Guest';
console.log(n);

Wartość domyślna z kolejnego wyszukania

Wartością po ?? może być kolejne wyszukanie z użyciem łańcucha, co pozwala najpierw sprawdzić dodatkowe źródło, a dopiero potem użyć końcowej wartości domyślnej zapisanej dosłownie.

type Prefs = { theme?: string };
const userPrefs: Prefs = {};
const sitePrefs: Prefs = { theme: 'light' };
const theme = userPrefs?.theme ?? sitePrefs?.theme ?? 'dark';
console.log(theme);

Łączenie z dostępem do elementu

Ten wzorzec działa również przy dostępie do elementu tablicy: element można odczytać za pomocą ?.[i], a następnie ustawić dla niego wartość domyślną za pomocą ??.

type Data = { tags?: string[] };
const d: Data = { tags: [] };
const first = d.tags?.[0] ?? 'none';
console.log(first);

Praktyczny odczyt ustawień

Połączmy wszystko: czytnik ustawień, który bezpiecznie przechodzi przez opcjonalne warstwy i gwarantuje użyteczną wartość. To kod TypeScript często spotykany w środowisku produkcyjnym.

type Settings = { ui?: { lang?: string } };
function getLang(s: Settings): string {
  return s.ui?.lang ?? 'en';
}
console.log(getLang({ ui: { lang: 'tr' } }), getLang({}));

Szybki test

Proszę sprawdzić swoje rozumienie łączenia operatorów ?. i ??.

Podsumowanie: łączenie ?. i ??

Poznali Państwo idiom obj?.value ?? fallback:

?. bezpiecznie przechodzi przez łańcuch, zwracając wartość albo undefined.
?? dostarcza wartość domyślną tylko wtedy, gdy wynik jest nullish.
Końcowy typ nie zawiera już undefined, często stając się prostym typem T.
Prawidłowe wartości falsy, takie jak 0, zostają zachowane.

Następnie omówimy opcjonalne wywołania i opcjonalny dostęp do elementów.

type Cfg = { limit?: number };
const c: Cfg = {};
const limit = c?.limit ?? 100;
console.log(limit);

Często zadawane pytania

Czy lekcja „Łączenie ?. i ??” jest bezpłatna?

Tak — pełny tekst „Łączenie ?. i ??” 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 „Łączenie ?. i ??”?

Łącz optional chaining z rozsądnymi wartościami domyślnymi Ć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 3 z 4.

Ile czasu zajmuje lekcja „Łączenie ?. i ??”?

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

Optional chaining z ?.
Nullish coalescing z ??
Łączenie ?. i ??
Wywołania opcjonalne i dostęp do elementów

← Powrót do TypeScript Academy