Массивы с несколькими типами

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

Тренажер по TypeScript

Не всегда массивы содержат данные только одного типа. Иногда нам нужно хранить смешанные значения, например, массив идентификаторов, которые могут быть и числами, и строками. Для этого используются Union Types внутри объявления массива.

Важно правильно использовать скобки: (string | number)[] означает массив, где каждый элемент может быть либо строкой, либо числом. Если забыть скобки и написать string | number[], смысл изменится: это будет либо одна строка, либо массив чисел. Понимание этого нюанса критично для безопасной типизации.

Вас ждут практические задания, где вы научитесь создавать гибкие списки. Вы будете исправлять ошибки типизации и учиться отличать правильный синтаксис объединения от ошибочного.

Список тем

1. Синтаксис объединения

id: 40637_ts_mix_arr_replace_01

В этом задании вам нужно объявить массив, который может содержать элементы двух типов: числа и булевы значения. Для этого используется синтаксис объединения типов (union type) в TypeScript. Дополните фрагмент кода, указав правильный тип для массива и расставив скобки вокруг объединения типов, чтобы код компилировался без ошибок.

Заполните пропуски
let mixedArray: input1S = [1, true, 2, false, 3];
console.log(mixedArray);
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

2. Допустимые элементы

id: 40637_ts_mix_arr_sort_02

Перед вами список значений, которые могут быть элементами массива с типом `(string | boolean)[]` в TypeScript. Ваша задача — распределить эти значения по двум категориям: «Valid» (допустимые для данного типа массива) и «Invalid» (недопустимые). Обратите внимание, что массив объявлен как содержащий только строки или логические значения, поэтому другие типы данных в него помещать нельзя. Перетащите каждый элемент в соответствующую категорию.

Перетяните элементы в соответствующие блоки
Valid
Invalid
'hello'
true
false
'world'
123
0
'typescript'
42
Сообщения
Проверить
Показать подсказку

3. Забытые скобки

id: 40637_ts_mix_arr_error_03

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

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

4. Типизация смешанного списка

id: 40637_ts_mix_arr_select_fill_04

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

Нужно правильно расставить в пропуски предложенные варианты
function processIds(ids: input1S) {
    console.log(ids.length);
}

processIds(input2S);
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

5. Структура типа

id: 40637_ts_mix_arr_highlight_05

В данном задании вам нужно разметить элементы объявления массива с несколькими типами в TypeScript. Обратите внимание на выражение `let arr: (boolean | string)[]`. Выделите следующие элементы: типы данных внутри круглых скобок, разделитель union (объединения типов) и скобки массива. Для каждого выделенного фрагмента выберите соответствующий тип из предложенных вариантов.

Кликните по каждому выделенному фрагменту и выберите для него подходящий тип из списка под текстом.
let arr: ({{boolean~|~t1}} {{|~|~t2}} {{string~|~t3}}){{[]~|~t4}};
Разделитель union
Скобки массива
Тип данных
Сообщения
Проверить
Показать подсказку

6. Проверка push

id: 40637_ts_mix_arr_predict_06

Проанализируйте приведённый фрагмент кода на TypeScript. Массив `items` явно типизирован как `(number | string)[]`. Определите, что произойдёт при попытке добавить в него объект с помощью метода `push`. Выберите единственный верный вариант, описывающий результат выполнения этого кода.

Выберите правильный вариант ответа
let items: (number | string)[] = [1, "apple"];
items.push(3);
items.push("banana");
// Попытка добавить объект
items.push({ key: "value" });
Сообщения
Проверить
Показать подсказку

7. Конструктор сложного массива

id: 40637_ts_mix_arr_build_07

Из предложенных строк соберите корректное объявление переменной на TypeScript. Переменная data должна быть массивом, который может содержать элементы типов User и Admin (объединение типов), и инициализирована пустым массивом. Одна из строк является лишней и не должна входить в решение. Порядок типов User и Admin в объединении не имеет значения, но остальные части должны следовать строгому синтаксису TypeScript.

Перетяните в правильном порядке строки из одного блока в другой
let data
: (
User
 | 
Admin
)[]
 = [];
let data: (User & Admin)[] = [];
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

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

id: 40637_compiler

В этом упражнении вы узнаете, как создавать массивы, способные хранить данные нескольких типов одновременно, используя Union Types. Попробуйте добавить в массив items новое значение (например, логический тип true) и посмотрите, как TypeScript подсветит ошибку, пока вы не обновите определение типа. Изменяйте содержимое массива, добавляйте свои элементы и функции для обработки данных — это ваша песочница для экспериментов. Попробуйте 'сломать' код, добавив неподдерживаемый тип, а затем исправьте его, расширив возможности массива!

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