Зарегистрируйтесь, чтобы продолжить обучение

Опциональные параметры в функциях Основы Typescript

В этом уроке мы разберем опциональные параметры в функциях.

Использование опциональных параметров в функциях

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

function split(str: string, separator?: string)

split('hexlet');
split('hexlet,code-basics', ',');

В таком случае реальный тип переменной separator будет string | undefined (string или undefined). Другой вариант задать опциональный параметр — присвоить значение по умолчанию:

// Знака вопроса больше нет, потому что есть значение по умолчанию
function split(str: string, separator: string = ',') {
  // ...
}

split('hexlet');
split('hexlet,code-basics', ',');

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

Колбек функции

Представим функцию filter(), которая фильтрует числовые массивы по переданному предикату:

// Необязательный параметр index
function filter(coll: number[], callback: (arg: number, index?: number) => boolean) {
  const result: number[] = [];
  coll.forEach((n, index) => {
    // Здесь он передается в колбек
    if (callback(n, index)) {
      result.push(n);
    }
  });
  return result;
}

Как и во встроенном методе filter(), колбек этой функции принимает индекс обрабатываемого элемента массива в качестве второго параметра. Обычно индексы не используют, но иногда фильтрация массива все таки делается на их основе — в этом случае их указывают.

Было бы логичным указать этот параметр как необязательный, но это так не работает:

// Выполнится без ошибок
filter([1, 2], (n) => n > 1);
// index is possibly 'undefined'
filter([1, 2], (n, index) => index > n);

В этом случае ошибка обозначает, что теоретически undefined может оказаться внутри колбека. Так происходит из-за необязательности параметра. По идее undefined не окажется в колбеке, потому что индекс всегда определен, но ошибка все равно появляется. Чтобы решить эту ситуацию, нужно отказаться от опциональности:

function filter(coll: number[], callback: (arg: number, index: number) => boolean) {
  // ...
}

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

В примере выше аргументом передается функция (n) => n > 1, а вызывается она как callback(n, index). Это приводит к игнорированию index, при этом никаких ошибок типов не возникает.


Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы
профессия
Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React
10 месяцев
с нуля
Старт 26 декабря
профессия
Программирование на JavaScript в браузере и на сервере (Node.js), разработка бекендов на Fastify и фронтенда на React
16 месяцев
с нуля
Старт 26 декабря
профессия
Программирование на JavaScript, разработка веб-приложений, bff и сервисов используя Fastify, проектирование REST API
10 месяцев
с нуля
Старт 26 декабря

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»