Rest параметры

Тренажер по TypeScript для пользователей с начальным уровнем подготовки.

Тренажер по TypeScript

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

Синтаксис прост: перед именем параметра ставится троеточие ..., а сам параметр типизируется как массив (например, ...numbers: number[]). Важное правило: Rest параметр всегда должен быть последним в списке аргументов. Внутри функции вы работаете с ним как с обычным массивом, используя методы вроде map, reduce или forEach.

Эти уроки и задания помогут вам научиться писать гибкие функции, которые легко масштабируются. Вы попрактикуетесь в объявлении rest-параметров, их типизации и использовании в реальных сценариях агрегации данных.

Список тем

1. Синтаксис Rest параметра

id: 40655_ts_rest_replace_01

Дополните фрагмент кода функции sum, которая должна принимать произвольное количество чисел и возвращать их сумму. Используйте синтаксис rest параметра. Вставьте оператор троеточия перед именем параметра и укажите тип массива чисел. Код должен корректно компилироваться и выполнять суммирование.

Заполните пропуски
function sum(input1S numbersinput2S): number {
    return numbers.reduce((total, current) => total + current, 0);
}
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

2. Определение rest-параметра

id: 40655_ts_rest_highlight_02

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

Кликните по каждому выделенному фрагменту и выберите для него подходящий тип из списка под текстом.
function logMessages(...{{messages~|~t1}}: {{string[]~|~t2}}): void
Тип параметра
Имя параметра
Сообщения
Проверить
Показать подсказку

3. Порядок параметров

id: 40655_ts_rest_error_03

В данном фрагменте кода TypeScript допущена синтаксическая ошибка, связанная с использованием rest-параметров. Rest-параметр должен находиться в конце списка параметров функции, но в текущем коде он расположен неправильно. Найдите строку с ошибкой и исправьте порядок параметров, чтобы функция могла корректно принимать аргументы.

Найдите ошибку и исправьте
function processItems(...items: string[], prefix: string): string[] {
    return items.map(item => prefix + item);
}
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

4. Типизация массива аргументов

id: 40655_ts_rest_select_fill_04

В этом задании вам предстоит дополнить код функции, которая объединяет строки, используя rest-параметры. В коде TypeScript с пропуском после двоеточия нужно выбрать правильный тип для массива аргументов из предложенного списка вариантов. Обратите внимание, что функция принимает произвольное количество строк и возвращает их объединение через пробел. Ваша задача — указать корректную типизацию rest-параметра, чтобы код был валидным и выполнял свою задачу.

Нужно правильно расставить в пропуски предложенные варианты
function concatStrings(...strings: input1S): string {
    return strings.join(' ');
}

const result = concatStrings('Hello', 'TypeScript', 'World');
console.log(result); // Вывод: Hello TypeScript World
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

5. Сборка функции с rest

id: 40655_ts_rest_build_05

Из предложенных строк соберите корректную функцию на TypeScript, которая использует rest параметры для приёма произвольного количества чисел и возвращает их сумму, применяя метод reduce. Функция должна быть объявлена с именем sum, принимать массив чисел и возвращать число. Игнорируйте лишние строки, которые не соответствуют этим требованиям или используют другие подходы (например, циклы).

Перетяните в правильном порядке строки из одного блока в другой
function sum(...args: number[]): number {
    const total = args.reduce((accumulator, currentValue) => {
        return accumulator + currentValue;
    }, 0);
    return total;
}
function product(...args: number[]): number {
    return args.reduce((acc, curr) => acc * curr, 1);
    for (let i = 0; i < args.length; i++) {
        total += args[i];
    }
    console.log(args);
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

6. Результат работы с разным числом аргументов

id: 40655_ts_rest_predict_06

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

Выберите правильный вариант ответа
function countArgs(...args: any[]): number {
    return args.length;
}

const result = countArgs(10, 20, 30, 40, 50);
Сообщения
Проверить
Показать подсказку

7. Логика обработки списка

id: 40655_ts_rest_analyze_07

Проанализируйте TypeScript-код сверху и восстановите последовательность логических шагов выполнения программы. Шаги снизу перемешаны — расставьте их в правильном порядке, чтобы отразить, как программа обрабатывает переданные аргументы с использованием rest параметров и что выводит в консоль.

function processItems(...items: string[]): void {
  console.log('Начало обработки списка:');
  for (const item of items) {
    console.log(`Обработан элемент: ${item}`);
  }
  console.log('Обработка завершена.');
}

// Вызов функции с несколькими аргументами
processItems('яблоко', 'банан', 'вишня');
Расположите элементы в логичном порядке
Завершение цикла после обработки всех элементов массива
Вывод в консоль сообщения 'Начало обработки списка:'
Начало цикла for...of для перебора каждого элемента массива items
Вызов функции processItems с аргументами 'яблоко', 'банан', 'вишня'
Вывод в консоль сообщения 'Обработка завершена.'
Rest параметр ...items собирает все переданные аргументы в массив ['яблоко', 'банан', 'вишня']
Внутри цикла: вывод текущего элемента с сообщением 'Обработан элемент: ...' (для каждого элемента)
Сообщения
Проверить
Показать подсказку

TypeScript: компиляция и запуск

id: 40655_compiler

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

TS
Запустить тренажёр (TypeScript)
НайтиКурс.Ру