Типизация массивов (Type[])

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

Тренажер по TypeScript

Массивы — одна из самых часто используемых структур данных. В TypeScript вы обязаны указывать, данные какого типа хранятся в массиве. Самый распространенный синтаксис для этого — добавление квадратных скобок к имени типа: string[], number[] или User[].

Это гарантирует, что вы случайно не добавите число в массив строк и не попытаетесь вызвать метод строки у числа. Существует также альтернативный синтаксис с использованием дженерика Array, который мы тоже затронем.

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

Список тем

1. Синтаксис квадратных скобок

id: 40635_ts_arr_base_replace_01

В TypeScript для типизации массивов используется синтаксис `Type[]`. В этом задании вам нужно объявить массив чисел, указав тип элементов и квадратные скобки для обозначения массива. Дополните код так, чтобы он корректно объявлял массив `numbers` с типом `number[]` и инициализировал его значениями 1, 2, 3. После выполнения программа выведет массив в консоль.

Заполните пропуски
// Объявите массив чисел с типом number[] и инициализируйте его значениями 1, 2, 3
let numbers: input1S input2S = [1, 2, 3];
console.log(numbers);
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

2. Определение массива

id: 40635_ts_arr_base_highlight_02

В объявлении функции TypeScript выделите элементы, связанные с определением массива: тип элементов массива и синтаксические скобки, обозначающие массив. Обратите внимание на структуру типа `Type[]` — она указывает, что параметр является массивом определённого типа.

Кликните по каждому выделенному фрагменту и выберите для него подходящий тип из списка под текстом.
function calculateSum(values: {{number~|~t1}}{{[~|~t2}}{{]~|~t3}}): number {
  return values.reduce((a, b) => a + b, 0);
}
Тип элементов массива
Скобки массива
Сообщения
Проверить
Показать подсказку

3. Неверный элемент

id: 40635_ts_arr_base_error_03

В представленном фрагменте кода TypeScript допущена ошибка, связанная с типизацией массива. Массив объявлен как содержащий только строки, но один из его элементов имеет неверный тип. Найдите и исправьте эту строку, чтобы код соответствовал объявленному типу string[] и мог быть успешно скомпилирован.

Найдите ошибку и исправьте
const colors: string[] = ['red', 'green', 'blue', 42];
console.log(colors);
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

4. Типизация параметра

id: 40635_ts_arr_base_select_fill_04

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

Нужно правильно расставить в пропуски предложенные варианты
function printUserNames(users: input1S) {
  for (const user of users) {
    console.log(user);
  }
}

const userList = ["Alice", "Bob", "Charlie"];
printUserNames(userList);
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

5. Операции с массивом

id: 40635_ts_arr_base_analyze_05

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

const colors: string[] = [];
colors.push('red');
colors.push('green');
const firstColor = colors[0];
console.log(firstColor);
console.log(colors.length);
Расположите элементы в логичном порядке
Вывод в консоль значения переменной firstColor (первый элемент массива)
Добавление строки 'green' в конец массива с помощью метода push
Чтение элемента массива по индексу 0 и сохранение в переменную firstColor
Вывод в консоль длины массива colors (количество элементов)
Добавление строки 'red' в конец массива с помощью метода push
Создание пустого массива строк с именем colors
Сообщения
Проверить
Показать подсказку

6. Вывод типа

id: 40635_ts_arr_base_predict_06

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

Выберите правильный вариант ответа
const arr = [1, 2, 3];
Сообщения
Проверить
Показать подсказку

7. Generic синтаксис

id: 40635_ts_arr_base_build_07

Из предложенных строк соберите корректную TypeScript-программу, которая объявляет массив чисел с использованием дженерик-синтаксиса Array, инициализирует его значениями [1, 2, 3] и выводит первый элемент массива в консоль. Одна из строк лишняя и в решение входить не должна.

Перетяните в правильном порядке строки из одного блока в другой
let numbers: Array<number>;
numbers = [1, 2, 3];
console.log(numbers[0]);
let numbers: number[];
console.log(numbers);
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

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

id: 40635_compiler

Изучаем типизацию массивов в TypeScript с синтаксисом Type[]. Попробуй изменить тип элементов, добавить в массив значения другого типа (например, строку в массив чисел) и посмотри, как TypeScript сразу подсветит ошибку! Поэкспериментируй: создай массивы с разными типами (string[], boolean[], (string | number)[]), объяви пустой массив [] и попробуй добавить в него элементы без явного указания типа, используй const assertions и readonly. Меняй код сколько угодно — компилятор покажет всё мгновенно!

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