0Pricing
TypeScript Academy · Урок

Объединение ?. и ??

Сочетайте необязательную цепочку с разумными значениями по умолчанию

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

Идеальное сочетание

Опциональная цепочка и нулевое слияние созданы для совместной работы. Шаблон obj?.value ?? fallback безопасно читает вложенное значение и подставляет значение по умолчанию, если оно отсутствует. Это один из самых полезных приёмов современного TypeScript.

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

Как работает этот шаблон

Сначала ?. вычисляет цепочку и возвращает значение или undefined. Затем ?? проверяет результат: если он равен null или undefined, используется значение по умолчанию. Два оператора — одно понятное выражение.

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

Тип результата

Цепочка создаёт тип T | undefined, а ?? удаляет undefined и объединяет тип со значением по умолчанию. Если типы совпадают, итоговый тип будет просто T — обрабатывать undefined больше не нужно.

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

Сохранение допустимых ложных значений

Поскольку ?? срабатывает только для null или undefined, корректное значение 0, полученное через цепочку, сохраняется. Значение по умолчанию используется только тогда, когда свойство действительно отсутствует.

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

Доступ к глубоко вложенной конфигурации

Для глубоко вложенной конфигурации объедините несколько шагов ?., завершив их одним ??. Если отсутствует любое звено, безопасно используется значение по умолчанию.

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

Значения по умолчанию для ответов программного интерфейса

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

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

Сочетание с результатами методов

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

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

Избегание громоздких проверок

До появления этих операторов пришлось бы писать многострочные проверки на отсутствие значения. Комбинированный приём заменяет целый блок одним выражением, повышая читаемость без потери безопасности.

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

Запасной вариант — другой поиск

Значением после ?? сам может быть другой поиск с цепочкой. Это позволяет сначала проверить дополнительный источник, а затем использовать окончательное значение по умолчанию.

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

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

Шаблон работает и с доступом к элементам массива: прочитайте элемент через ?.[i] и задайте значение по умолчанию с помощью ??.

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

Практический считыватель настроек

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

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

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

Проверьте, насколько хорошо Вы поняли сочетание ?. и ??.

Итоги: сочетание ?. и ??

Вы изучили приём obj?.value ?? fallback:

  • ?. безопасно проходит по цепочке, возвращая значение или undefined.
  • ?? подставляет значение по умолчанию только тогда, когда результат равен null или undefined.
  • В итоговом типе исчезает undefined, поэтому часто получается простой тип T.
  • Допустимые ложные значения, например 0, сохраняются.

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

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

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

Урок «Объединение ?. и ??» бесплатный?

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

Чему я научусь в уроке «Объединение ?. и ??»?

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

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

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

Сколько времени занимает урок «Объединение ?. и ??»?

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

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

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

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

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