0Pricing
TypeScript Academy · Lekcja

Optional chaining z ?.

Bezpiecznie uzyskuj dostęp do głęboko zagnieżdżonych właściwości, które mogą mieć wartość null

Optional chaining z ?. to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 1 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 opcjonalnego łańcuchowania

Opcjonalne łańcuchowanie (?.) umożliwia bezpieczny dostęp do właściwości, która może znajdować się w wartości null lub undefined. Jeśli wartość jest nullish, całe wyrażenie zostaje skrócone do undefined zamiast zgłaszać wyjątek.

type User = { profile?: { bio?: string } };
const u: User = {};
const bio = u.profile?.bio;
console.log(bio); // undefined, no crash

Przerywanie działania dla wartości nullish

Gdy operand przed ?. ma wartość null lub undefined, obliczanie natychmiast się zatrzymuje i zwracana jest wartość undefined. Pozostała część łańcucha nigdy nie zostaje wykonana.

const data: { value?: number } | null = null;
console.log(data?.value); // undefined, did not throw

Łączenie wielu poziomów

Element ?. można umieścić na każdym niepewnym poziomie głębokiego dostępu. Dowolne ogniwo o wartości nullish przerywa cały łańcuch, chroniąc przed błędami typu „nie można odczytać właściwości wartości undefined”.

type Company = { ceo?: { contact?: { email?: string } } };
const c: Company = { ceo: {} };
console.log(c.ceo?.contact?.email); // undefined

Typ wyniku zawiera undefined

Ponieważ łańcuch może zwrócić undefined, TypeScript dodaje undefined do typu wyniku. Jeśli typ właściwości to string, wynik łańcucha ma typ string | undefined.

type Settings = { theme?: { name: string } };
const s: Settings = { theme: { name: 'dark' } };
const name = s.theme?.name; // type: string | undefined
console.log(name);

Obsługa wyniku undefined

Ponieważ wynikiem może być undefined, zazwyczaj należy go sprawdzić albo podać wartość zastępczą. System typów przypomina o konieczności obsłużenia brakującego przypadku.

type Settings = { theme?: { name: string } };
const s: Settings = {};
const name = s.theme?.name;
if (name === undefined) console.log('using default');
else console.log(name);

Porównanie z łańcuchami &&

Przed wprowadzeniem ?. deweloperzy zapisywali długie łańcuchy &&: a && a.b && a.b.c. Opcjonalne łańcuchowanie wyraża tę samą intencję znacznie zwięźlej i jest czytelne od góry do dołu.

type A = { b?: { c?: number } };
const a: A = { b: { c: 5 } };
const oldWay = a && a.b && a.b.c;
const newWay = a?.b?.c;
console.log(oldWay, newWay);

Dlaczego ?. jest lepsze niż &&

Podejście z użyciem && traktuje każdą wartość fałszywą (0, '', false) jako punkt zatrzymania, co może prowadzić do błędu. Opcjonalne łańcuchowanie zatrzymuje się tylko dla null lub undefined, czyli zwykle dokładnie wtedy, kiedy tego Państwo oczekują.

type Box = { count?: number };
const b: Box = { count: 0 };
console.log(b && b.count); // 0... but && stops on falsy in longer chains
console.log(b?.count); // 0, cleanly

Opcjonalne łańcuchowanie tablic obiektów

Opcjonalne łańcuchowanie działa przy każdym dostępie do właściwości. W połączeniu z dostępem przez element tablicy umożliwia bezpieczne docieranie do zagnieżdżonych tablic obiektów.

type Team = { members?: Array<{ name: string }> };
const t: Team = { members: [{ name: 'Ada' }] };
console.log(t.members?.[0]?.name);

Przerwanie działania pomija całe wyrażenie

Gdy łańcuch zostanie skrócony, pomijane są nawet dostępy do właściwości zapisane za nim (bez ?.). Całe wyrażenie od razu przyjmuje wartość undefined.

type Deep = { a?: { b: { c: number } } };
const d: Deep = {};
// a is undefined, so b.c is never evaluated
console.log(d.a?.b.c); // undefined

Opcjonalne łańcuchowanie z wynikami funkcji

Łańcuch można kontynuować od wyniku wywołania funkcji. Jeśli funkcja zwróci wartość nullish, następny dostęp zostanie bezpiecznie pominięty.

function findUser(): { name: string } | null {
  return null;
}
console.log(findUser()?.name); // undefined

Praktyczny przykład konfiguracji

Opcjonalne łańcuchowanie doskonale sprawdza się podczas odczytywania częściowej konfiguracji lub odpowiedzi API, w których zagnieżdżone pola mogą być nieobecne. Zachowuje czytelność dostępu i zapobiega awariom.

type Response = { user?: { address?: { city?: string } } };
const res: Response = { user: { address: {} } };
console.log(res.user?.address?.city ?? 'unknown city');

Szybki test

Sprawdźcie Państwo swoją wiedzę o opcjonalnym łańcuchowaniu.

Podsumowanie: opcjonalne łańcuchowanie

Nauczyli się Państwo, że ?.:

  • Bezpiecznie uzyskuje dostęp do właściwości wartości, które mogą mieć wartość null/undefined.
  • Przerywa całe wyrażenie i zwraca undefined, gdy napotka ogniwo nullish.
  • Dodaje undefined do typu wyniku.
  • Ulepsza łańcuchy &&, zatrzymując się tylko dla wartości nullish, a nie dla wszystkich wartości fałszywych.

Następnie omówimy operator koalescencji wartości nullish.

type Cfg = { db?: { host?: string } };
const c: Cfg = {};
console.log(c.db?.host);

Często zadawane pytania

Czy lekcja „Optional chaining z ?.” jest bezpłatna?

Tak — pełny tekst „Optional chaining 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 „Optional chaining z ?.”?

Bezpiecznie uzyskuj dostęp do głęboko zagnieżdżonych właściwości, które mogą mieć wartość null Ć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 1 z 4.

Ile czasu zajmuje lekcja „Optional chaining 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