Rest элементы в кортежах

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

Тренажер по TypeScript

Обычные кортежи в TypeScript имеют фиксированную длину. Однако, используя Rest элементы (синтаксис ...type[]), можно создавать кортежи с переменным количеством элементов в определенной позиции.

Это похоже на работу с аргументами функций. Rest-элемент может находиться в начале, середине или конце кортежа.
Пример: type NameAndScores = [string, ...number[]]; — первым элементом всегда идет строка, а за ней может следовать любое количество чисел (или ни одного).

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

Список тем

1. Синтаксис Rest элемента

id: 40642_tuple_rest_syntax_replace

В этом задании вам нужно дополнить объявление кортежа с использованием rest-элемента. Rest-элемент позволяет указать, что после определённых типизированных элементов может следовать переменное количество элементов одного типа. В данном случае кортеж должен начинаться с числа, а за ним может быть любое количество строк. Заполните пропуски в коде, чтобы он корректно компилировался и соответствовал описанию.

Заполните пропуски
let myTuple: [number, input1S];
let arr: string[] = ["a", "b", "c"];
myTuple = [1, input2S];
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

2. Валидность присваивания

id: 40642_valid_assignment_predict

В данном задании представлен код на TypeScript, в котором объявлен кортеж с типом [boolean, ...string[]]. Затем этому кортежу присваивается массив с элементами разных типов. Проанализируйте код и определите, будет ли ошибка компиляции, и если да, то из-за чего.

Выберите правильный вариант ответа
let myTuple: [boolean, ...string[]];
myTuple = [true, "hello", 123];
Сообщения
Проверить
Показать подсказку

3. Сборка типа с Rest

id: 40642_build_rest_tuple

Из предложенных строк соберите корректное определение типа кортежа на TypeScript, где rest элемент находится в середине (например, [string, ...boolean[], number]). Используйте только необходимые строки, игнорируя лишние. В решении должен получиться тип, описывающий кортеж, где первый элемент — строка, затем произвольное количество булевых значений, и последний элемент — число.

Перетяните в правильном порядке строки из одного блока в другой
type MyTuple = [
string,
...boolean[],
number
];
type MyTuple = [string, number, ...boolean[]];
...boolean;
let x: MyTuple = ['hello', true, 42];
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

4. Ошибка деструктуризации

id: 40642_destructuring_rest_error

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

Найдите ошибку и исправьте
let tuple: [string, number, ...boolean[]] = ["hello", 42, true, false];
let [first, second, ...rest]: [string, boolean, ...boolean[]] = tuple;
console.log(first, second, rest);
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

5. Найти Rest элемент

id: 40642_identify_rest_part_highlight

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

Кликните по каждому выделенному фрагменту и выберите для него подходящий тип из списка под текстом.
{{type~|~t1}} {{MyTuple~|~t2}} {{=~|~t3}} {{[~|~t4}}{{string~|~t5}}{{ , ~|~t6}}{{number~|~t7}}{{ , ~|~t8}}{{...boolean[]~|~t9}}{{ ]~|~t10}}{{ ;~|~t11}}
Rest-оператор
Тип данных
Имя типа
Ключевое слово
Знак препинания
Сообщения
Проверить
Показать подсказку

6. Выбор определения

id: 40642_select_tuple_definition

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

Нужно правильно расставить в пропуски предложенные варианты
function processCSV(header: input1S, ...data: input2S): void {
  console.log(`Header: ${header}`);
  console.log(`Data: ${data.join(', ')}`);
}

// Пример вызова
processCSV('id,name,age', '1,Alice,30', '2,Bob,25');
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

7. Сортировка значений

id: 40642_sort_tuple_values

Перед вами несколько примеров массивов в TypeScript. Распределите их по двум категориям: 'Валидные' и 'С ошибкой типа'. Каждый массив должен быть проверен на соответствие типу `[number, ...string[]]`. Этот тип описывает кортеж, где первый элемент — число, а все последующие (если есть) — строки. Обратите внимание, что rest-элементы (`...string[]`) могут отсутствовать, но первый элемент обязателен и должен быть числом.

Перетяните элементы в соответствующие блоки
Валидные
С ошибкой типа
[1, "a", "b"]
[0, "hello"]
[42, "x", "y", "z"]
[1]
["first", "second"]
[1, 2, 3]
[1, "a", 3]
[]
Сообщения
Проверить
Показать подсказку

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

id: 40642_compiler

Демо показывает, как в TypeScript использовать rest-элементы в кортежах: фиксированная часть + переменное количество значений в конце. Попробуйте менять число «добавочных» элементов и их типы, чтобы увидеть, где компилятор разрешает, а где запрещает. Поэкспериментируйте: добавьте новые команды, сделайте свою функцию с другим шаблоном кортежа или поменяйте типы rest-части (например, на boolean[]). В коде есть и корректные примеры, и намеренно неправильные строки (закомментированы) — раскомментируйте их, чтобы увидеть сообщения об ошибках.

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