JavaScript и TypeScript: задачи для практики

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

Здесь полезно держать рядом две версии мышления: JavaScript показывает поведение во время выполнения, TypeScript помогает заранее описать форму данных

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

Что повторить перед практикой

Перед решением полезно освежить:

• переменные
• массивы
• объекты
• функции
• типы TypeScript
• обработка ошибок

Если какая-то тема пока слабая, не пропускайте ее. Выберите задачу, где она встречается отдельно, и разберите ее на маленьком примере

Задачи с решениями

Задача 1: Сумма массива

Посчитайте сумму чисел в массиве

Один из вариантов решения:

const numbers = [2, 4, 6];
const sum = numbers.reduce((total, number) => total + number, 0);
console.log(sum);

Проверьте обычный случай, пустые данные и вариант с повторяющимися значениями, если это подходит к условию

Задача 2: Фильтр задач

Оставьте только выполненные задачи

Один из вариантов решения:

const tasks = [
  { title: 'HTML', done: true },
  { title: 'CSS', done: false },
];
const completed = tasks.filter((task) => task.done);
console.log(completed);

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

Задача 3: Проверка email

Сделайте простую проверку строки перед отправкой формы

Один из вариантов решения:

const email = 'name@example.com';
const isValid = email.includes('@') && email.includes('.');
console.log(isValid);

Отдельно проверьте пустую строку, адрес без @, адрес без точки и строку с пробелами по краям

Задача 4: Группировка по статусу

Разложите элементы по статусу

Один из вариантов решения:

const orders = [
  { id: 1, status: 'new' },
  { id: 2, status: 'paid' },
  { id: 3, status: 'new' },
];
const grouped = orders.reduce((acc, order) => {
  if (!acc[order.status]) {
    acc[order.status] = [];
  }
  acc[order.status].push(order);
  return acc;
}, {});
console.log(grouped);

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

Задача 5: Счетчик кликов

Сделайте простой счетчик состояния

Один из вариантов решения:

let count = 0;
function click() {
  count += 1;
  console.log(count);
}
click();
click();

Сравните результат с ожиданием до запуска: это быстро показывает, где была ошибка в рассуждении

Задача 6: Форматирование цены

Выведите цену в человекочитаемом виде

Один из вариантов решения:

const price = 1490;
console.log(new Intl.NumberFormat('ru-RU').format(price) + ' ₽');

Проверьте обычный случай, пустые данные и вариант с повторяющимися значениями, если это подходит к условию

По этой теме полезно отдельно посмотреть Идеи приложений на JavaScript для портфолио, чтобы расширить контекст и сравнить подходы

По этой теме полезно отдельно посмотреть Вопросы JavaScript на собеседовании, чтобы расширить контекст и сравнить подходы

Как разбирать решение

Готовое решение полезно только тогда, когда вы можете объяснить каждую строку. После просмотра ответа закройте его и попробуйте написать заново. Если не получается, значит, вы запомнили форму, но еще не поняли прием

Разбор делайте по схеме:

1. Какие данные есть в начале
2. Что нужно получить в конце
3. Какая операция связывает вход и результат
4. Где может появиться ошибка
5. Какие значения нужно проверить

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

Как усложнять

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

Не усложняйте сразу все. Одно изменение — один запуск. Если программа сломалась, вернитесь к предыдущей рабочей версии и найдите конкретную строку, где поведение изменилось

Частые ошибки

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

Не ограничивайтесь одним примером. Один запуск доказывает только то, что программа сработала на одном наборе данных

Не игнорируйте сообщение об ошибке. В нем часто есть тип проблемы и строка

Не смешивайте несколько новых тем в одной задаче. Если не понятны и циклы, и списки, и функции, начните с самого слабого места отдельно

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

План тренировки

1. Решите две простые задачи на базовый синтаксис
2. Решите две задачи на условия
3. Решите две задачи на цикл или перебор
4. Решите две задачи на коллекции
5. Вынесите повторяющуюся часть решения в функцию
6. Проверьте неудобные данные
7. Перепишите одну задачу с нуля на следующий день

Чек-лист

• Условие понятно без подсказок
• Входные данные выписаны
• Решение сначала описано словами
• Код запущен
• Проверен обычный пример
• Проверен неудобный пример
• Ошибка разобрана, а не стерта
• Решение можно объяснить вслух
• Есть похожая задача для закрепления

Дополнительные задачи на TypeScript-мышление

Задача 7: Описать тип пользователя

type User = {
  id: number;
  name: string;
  email: string;
  active: boolean;
};

const user: User = {
  id: 1,
  name: 'Анна',
  email: 'anna@example.com',
  active: true,
};

Проверьте, что будет, если убрать поле email или передать строку вместо id

Задача 8: Функция с типом результата

type Product = {
  title: string;
  price: number;
};

function getTotal(products: Product[]): number {
  return products.reduce((total, product) => total + product.price, 0);
}

Здесь TypeScript помогает заранее увидеть, что функция должна вернуть число

Задача 9: Union для статуса

type OrderStatus = 'new' | 'paid' | 'cancelled';

function label(status: OrderStatus): string {
  if (status === 'new') return 'Новый';
  if (status === 'paid') return 'Оплачен';
  return 'Отменен';
}

Union полезен там, где нельзя допускать случайные строки вроде payd или done

Задача 10: Типизировать ответ формы

type FormResult = {
  ok: boolean;
  message: string;
};

function validateName(name: string): FormResult {
  if (name.trim().length < 2) {
    return { ok: false, message: 'Имя слишком короткое' };
  }

  return { ok: true, message: 'Можно отправлять' };
}

Проверьте пустую строку, строку из пробелов и нормальное имя

Задача 11: Массив типизированных задач

type Task = {
  title: string;
  done: boolean;
};

const tasks: Task[] = [];
tasks.push({ title: 'Повторить массивы', done: false });

Попробуйте добавить задачу без поля done и посмотрите, как TypeScript подсказывает ошибку