Бесплатный курс по TypeScript. Зарегистрируйтесь для отслеживания прогресса →

TypeScript: Опциональные параметры в колбеках

Опциональные параметры в функциях задаются с помощью знака вопроса после параметра:

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

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

В таком случае реальный тип переменной separator будет 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);
// Object is possibly 'undefined'
filter([1, 2], (n, index) => index > n);

В данном случае ошибка обозначает то, что из-за "необязательности", внутри колбека в теории может оказаться undefined, чего по смыслу происходить не может, индекс всегда определен.

Правильным решением для таких ситуаций будет отказ от опциональности:

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

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

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

Задание

Реализуйте функцию map(), которая принимает на вход массив чисел и колбек, который будет использоваться для преобразования каждого числа из массива, в какое-то другое число. Функция возвращает массив с новыми числами.

map([3, 9], (n) => n - 3);
// [0, 6]

map([8, 9], (n) => n + 8);
// [16, 17]

Параметры функции:

  1. Массив чисел
  2. Анонимная функция принимающая на вход число и возвращающая число. У этой функции есть необязательный параметр - индекс элемента в массиве.
map([8, 9], (n, index) => index + n);
// [8, 10]
Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

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

Мой код отличается от решения учителя 🤔

Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

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

Прочитал урок — ничего не понятно 🙄

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics
Если вы столкнулись с трудностями и не знаете, что делать, задайте вопрос в нашем большом и дружном сообществе