0Pricing
TypeScript Academy · Урок

Необязательная цепочка с ?.

Безопасно обращайтесь к глубоко вложенным свойствам, которые могут иметь значение null

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

Оператор опциональной цепочки

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

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

Прерывание при отсутствующем значении

Если операнд перед ?. равен null или undefined, вычисление немедленно прекращается и возвращает undefined. Остальная часть цепочки не выполняется.

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

Цепочка из нескольких уровней

Вы можете разместить ?. на каждом неопределённом шаге глубокого доступа. Любое отсутствующее звено прерывает всю цепочку и защищает вас от ошибок «невозможно прочитать свойство неопределённого значения».

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

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

Поскольку цепочка может вернуть undefined, TypeScript добавляет undefined в тип результата. Если тип свойства — string, результат цепочки имеет тип string | undefined.

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

Обработка неопределённого результата

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

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

Сравнение с цепочками &&

До появления ?. разработчики писали длинные цепочки &&: a && a.b && a.b.c. Опциональная цепочка выражает тот же замысел гораздо короче и читается сверху вниз.

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

Почему ?. лучше, чем &&

Подход с && считает любой ложный результат (0, '', false) точкой остановки, что может привести к ошибке. Опциональная цепочка останавливается только на null или undefined, чего обычно и требуется добиться.

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

Опциональная цепочка для массивов объектов

Опциональная цепочка работает при доступе к любому свойству. В сочетании с доступом к элементу она безопасно проникает во вложенные массивы объектов.

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

Прерывание останавливает всё выражение

После прерывания цепочки даже обращения к свойствам, записанные после него (без ?.), пропускаются. Всё выражение сразу вычисляется как 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

Опциональная цепочка с результатами функций

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

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

Практический пример конфигурации

Опциональная цепочка особенно полезна при чтении partial-конфигурации или ответов программного интерфейса, в которых вложенные поля могут отсутствовать. Она сохраняет доступ понятным и предотвращает сбои.

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

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

Проверьте, насколько хорошо вы понимаете опциональную цепочку.

Повторение: опциональная цепочка

Вы узнали, что ?.:

  • Безопасно обращается к свойствам значений, которые могут быть равны null или undefined.
  • Прерывает всё выражение и возвращает undefined при отсутствующем звене.
  • Добавляет undefined в тип результата.
  • Улучшает цепочки &&, останавливаясь только при отсутствии значения, а не при любом ложном значении.

Далее — оператор нулевого слияния.

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

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

Урок «Необязательная цепочка с ?.» бесплатный?

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

Чему я научусь в уроке «Необязательная цепочка с ?.»?

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

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

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

Сколько времени занимает урок «Необязательная цепочка с ?.»?

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

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

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

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

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