PricingLoginStart free
TypeScript Academy · Урок

Необязательные вызовы и доступ к элементам

Используйте ?.() и ?.[] для безопасных вызовов методов и индексации

Урок 4 из 413 шагов

«Необязательные вызовы и доступ к элементам» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 4 уроков всего.

Не только доступ к свойствам

Необязательная цепочка не ограничивается конструкцией obj?.prop. У неё есть ещё две формы: необязательные вызовы с помощью ?.() и необязательный доступ к элементам с помощью ?.[index]. Обе формы прекращают вычисление при значении null или undefined, как и доступ к свойствам.

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

Необязательные вызовы методов

Используйте obj.method?.(), чтобы вызвать метод только при его наличии. Если method равен null или undefined, вызов пропускается, а выражение возвращает undefined.

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

Где размещать ?.

Конструкция ?. размещается непосредственно перед скобками вызова. obj.method?.() проверяет method, а не obj. Чтобы защитить также и obj, напишите obj?.method?.().

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

Вызов необязательных обратных вызовов

Очень распространённый вариант использования — вызов необязательного параметра обратного вызова. Вместо проверки с помощью if напишите callback?.(), чтобы вызвать его только при переданном значении.

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

Необязательный доступ к элементам

Для массивов или индексных сигнатур, которые могут иметь значение null или undefined, используйте arr?.[index]. Если arr равен null или undefined, вычисление доступа прекращается; в противном случае элемент считывается обычным образом.

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

Доступ к элементам по динамическим ключам

Необязательный доступ к элементам также работает с квадратными скобками для динамических или вычисляемых ключей объекта, который может иметь значение null или undefined.

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

Сочетание доступа к элементам и вызовов

Вы можете свободно сочетать эти формы. Сначала обратитесь к элементу необязательного массива, а затем при необходимости вызовите метод этого элемента — каждый ?. защищает свой шаг.

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

Необязательная цепочка для результатов функций

Цепочку можно продолжить от любого значения, возвращённого функцией. Если функция возвращает null или undefined, последующие вызовы или обращения безопасно прекращают вычисление.

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

Тип результата включает неопределённое значение

Как и цепочки обращений к свойствам, необязательные вызовы и доступ к элементам добавляют undefined в тип результата. Объедините их с ??, чтобы задать значение по умолчанию и убрать undefined.

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

Защита обработчиков событий

В коде пользовательского интерфейса и обработке событий необязательные вызовы удобно используют для вызова обработчиков, которые могут быть не заданы. Не нужны громоздкие проверки существования, и отсутствие обработчика не приводит к сбою.

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);

Пример диспетчера плагинов

Объединим всё вместе: диспетчер, который при необходимости вызывает именованную точку расширения плагина из возможно неполного реестра и задаёт результат по умолчанию, если обработчик ничего не обработал.

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'));

Быстрая проверка

Проверьте, насколько хорошо Вы поняли необязательные вызовы и доступ к элементам.

Ответь в интерактивном уроке

Итоги: необязательные вызовы и доступ

Вы изучили другие формы необязательной цепочки:

  • obj.method?.() вызывает метод только при его наличии.
  • arr?.[index] безопасно считывает элемент из контейнера, который может иметь значение null или undefined.
  • Все формы возвращают undefined и прекращают вычисление при операнде со значением null или undefined.
  • Сочетайте их с ??, чтобы задать результат по умолчанию.

Следующий курс: основы readonly и неизменяемости.

type Cfg = { init?: () => void };
const c: Cfg = {};
c.init?.();
console.log('ran safely');
Можно начать бесплатно

Изучай TypeScript с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы
101
Уроки
352
Начать учиться бесплатноПосмотреть полный курс

Часто задаваемые вопросы

Урок «Необязательные вызовы и доступ к элементам» бесплатный?

Да — полный текст урока «Необязательные вызовы и доступ к элементам» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Необязательные вызовы и доступ к элементам»?

Используйте ?.() и ?.[] для безопасных вызовов методов и индексации Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать TypeScript Academy?

Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Необязательные вызовы и доступ к элементам»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке TypeScript Academy?

Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Необязательная цепочка с ?.
  2. Объединение с nullish с помощью ??
  3. Объединение ?. и ??
  4. Необязательные вызовы и доступ к элементам
← Назад к TypeScript Academy