TypeScript Academy · Lekcja

Wywołania opcjonalne i dostęp do elementów

Używaj ?.() i ?.[] do bezpiecznego wywoływania metod i indeksowania

Lekcja 4 z 413 kroki

Wywołania opcjonalne i dostęp do elementów to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 4 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.

Poza dostępem do właściwości

Opcjonalne łańcuchowanie nie ogranicza się do obj?.prop. Ma jeszcze dwie formy: opcjonalne wywołania za pomocą ?.() oraz opcjonalny dostęp do elementu za pomocą ?.[index]. W obu przypadkach działanie jest przerywane dla wartości nullish, podobnie jak przy dostępie do właściwości.

type Obj = { greet?: () => string };
const o: Obj = {};
console.log(o.greet?.()); // undefined, no crash

Opcjonalne wywołania metod

Proszę użyć obj.method?.(), aby wywołać metodę tylko wtedy, gdy istnieje. Jeśli method ma wartość null lub undefined, wywołanie zostaje pominięte, a wyrażenie zwraca undefined.

type Logger = { log?: (m: string) => void };
const silent: Logger = {};
silent.log?.('hello'); // skipped, no error
console.log('continued safely');

Gdzie umieścić ?.

Element ?. należy umieścić bezpośrednio przed nawiasami wywołania. obj.method?.() sprawdza metodę, a nie obj. Aby zabezpieczyć również obj, należy napisać obj?.method?.().

type Api = { send?: (x: number) => number };
const api: Api | null = null;
console.log(api?.send?.(5)); // undefined; guards both api and send

Wywoływanie opcjonalnych callbacków

Bardzo często opcjonalne wywołania służą do wywoływania opcjonalnego parametru callback. Zamiast sprawdzać go za pomocą if, można napisać callback?.(), aby wywołać go tylko wtedy, gdy został przekazany.

function run(onDone?: () => void): void {
  console.log('working...');
  onDone?.(); // call only if passed
}
run();
run(() => console.log('finished'));

Opcjonalny dostęp do elementów

W przypadku tablic lub sygnatur indeksów, które mogą mieć wartość nullish, należy użyć arr?.[index]. Jeśli arr ma wartość nullish, dostęp zostaje przerwany; w przeciwnym razie element jest odczytywany normalnie.

const list: string[] | undefined = undefined;
console.log(list?.[0]); // undefined, no crash

Dostęp do elementów za pomocą dynamicznych kluczy

Opcjonalny dostęp do elementów działa również z notacją nawiasową w przypadku dynamicznych lub obliczanych kluczy obiektu, który może mieć wartość nullish.

type Dict = { [key: string]: number };
const data: Dict | null = { a: 1, b: 2 };
const key = 'a';
console.log(data?.[key]); // 1

Łączenie dostępu do elementów i wywołań

Można swobodnie łączyć te formy. Najpierw można przejść do elementu opcjonalnej tablicy, a następnie opcjonalnie wywołać metodę tego elementu — każdy element ?. zabezpiecza własny krok.

type Handlers = Array<{ fire?: () => string }>;
const hs: Handlers | undefined = [{ fire: () => 'boom' }];
console.log(hs?.[0]?.fire?.());

Opcjonalne łańcuchowanie wyników funkcji

Opcjonalne łańcuchowanie można kontynuować od dowolnej wartości zwróconej przez funkcję. Jeśli funkcja zwróci wartość nullish, kolejne wywołania lub operacje dostępu zostaną bezpiecznie przerwane.

function getHandler(): (() => string) | undefined {
  return undefined;
}
console.log(getHandler()?.()); // undefined

Typ wyniku zawiera undefined

Podobnie jak w przypadku łańcuchów dostępu do właściwości, opcjonalne wywołania i dostęp do elementów dodają undefined do typu wyniku. Można połączyć je z ??, aby zapewnić wartość domyślną i usunąć undefined.

type Obj = { compute?: () => number };
const o: Obj = {};
const value = o.compute?.() ?? 0;
console.log(value);

Zabezpieczanie handlerów zdarzeń

W kodzie interfejsu użytkownika i obsługi zdarzeń opcjonalne wywołania pozwalają elegancko wywoływać handlery, które mogą nie być ustawione. Nie trzeba pisać rozwlekłego sprawdzenia istnienia i nie wystąpi błąd, gdy handlera brakuje.

type Props = { onClick?: (id: number) => void };
function click(p: Props, id: number): void {
  p.onClick?.(id); // safe if onClick is missing
}
click({ onClick: (id) => console.log('clicked', id) }, 7);
click({}, 8);

Przykład dyspozytora pluginów

Połączmy wszystko: dyspozytor, który opcjonalnie wywołuje nazwany hook pluginu z rejestru, w którym mogą występować braki, i zwraca wartość domyślną, gdy nic go nie obsłuży.

type Hooks = { [name: string]: (() => string) | undefined };
const hooks: Hooks = { save: () => 'saved' };
function fire(name: string): string {
  return hooks[name]?.() ?? 'no handler';
}
console.log(fire('save'), fire('delete'));

Szybkie sprawdzenie

Proszę sprawdzić swoją wiedzę na temat opcjonalnych wywołań i dostępu do elementów.

Odpowiedz w interaktywnej lekcji

Powtórzenie: opcjonalne wywołania i dostęp

Poznali Państwo pozostałe formy opcjonalnego łańcuchowania:

obj.method?.() wywołuje metodę tylko wtedy, gdy ona istnieje.
arr?.[index] bezpiecznie odczytuje element z kontenera, który może mieć wartość nullish.
Wszystkie formy zwracają undefined po napotkaniu operandu o wartości nullish.
Można połączyć je z ??, aby ustawić wartość domyślną wyniku.

Następny kurs: podstawy readonly i niezmienności.

type Cfg = { init?: () => void };
const c: Cfg = {};
c.init?.();
console.log('ran safely');

Bezpłatny start

Ucz się TypeScript dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 101
Lekcje: 352

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Wywołania opcjonalne i dostęp do elementów” jest bezpłatna?

Tak — pełny tekst „Wywołania opcjonalne i dostęp do elementów” 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 „Wywołania opcjonalne i dostęp do elementów”?

Używaj ?.() i ?.[] do bezpiecznego wywoływania metod i indeksowania Ć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 4 z 4.

Ile czasu zajmuje lekcja „Wywołania opcjonalne i dostęp do elementów”?

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