Урок №2

1. Зачем frontend-разработчику JavaScript и TypeScript

Контекст. Перед тем как собирать интерфейс (кнопки, списки, формы), нам нужен «язык общения» с браузером. Этим языком и служат JavaScript и его надстройка TypeScript.

Когда пользователь нажимает кнопку, мы должны выполнить функцию. Когда приходит ответ API, нужно разобрать данные. Когда задача меняет статус, необходимо обновить состояние интерфейса. Всё это выражается средствами JavaScript (мы увидим это во второй половине урока).

Angular и React не скрывают JavaScript. Напротив, они предполагают, что разработчик уверенно владеет функциями, объектами, массивами, модулями и асинхронным кодом.

2. Программа, выражение и инструкция

Программа состоит из команд, которые можно рассматривать как инструкции. Выражение, в свою очередь, вычисляется в значение.

Контекст. Это самый первый базовый навык: отличить «кусок кода, который что-то считает» (выражение) от «команды сделать что-то» (инструкция). В TaskFlow всё строится на этом.

const total = 10 + 20;
const greeting = "Привет";

console.log(total);
console.log(greeting);

Разбор по шагам:

1. 10 + 20 — выражение, оно вычисляется в число 30.
2. const total = ... — инструкция: создаём «ящичек» total и кладём туда 30.
3. console.log(total) — инструкция: показываем содержимое ящичка в консоли (30).

10 + 20 — выражение: оно даёт значение 30. const total = 10 + 20; — инструкция объявления и инициализации переменной.

Что увидит пользователь: в консоли браузера (F12 → Console) появятся две строки: 30 и Привет.

Это различие пригодится позже, когда JSX, Angular template expressions и callback-функции начнут смешивать вычисления и управление потоком.

3. let, const и область видимости

Переменная — имя, под которым программа хранит ссылку на значение. В современном JavaScript чаще используются const и let. const означает, что переменную нельзя переназначить. Объект, на который она указывает, при этом может быть изменён.

Контекст. Переменная — это фундамент всего кода. В TaskFlow мы храним в переменных список задач, статус загрузки, выбранный фильтр.

const task = { title: "Изучить TS" };

task.title = "Изучить TypeScript"; // допустимо: меняем вещь внутри ячейки

// task = {}; // ошибка: переменную нельзя переназначить на другой объект

let count = 0;
count = count + 1; // допустимо: let разрешает переназначить

Разбор по шагам:

1. Создаём константу task — объект с заголовком.
2. Меняем текст внутри объекта — это разрешено.
3. Пытаемся присвоить task новый объект — ошибка, потому что const.
4. С переменной count (тип let) такое разрешено.

Область видимости означает, где имя доступно. let и const имеют блочную область видимости, связанную с фигурными скобками.

if (true) {
  const message = "Внутри блока";
  console.log(message);
}

// console.log(message); // ошибка: снаружи блока имя не видно

Что увидит пользователь: на экране консоли появится Внутри блока. Если раскомментировать последнюю строку — ошибка «message is not defined».

4. Примитивные типы JavaScript

Основные примитивы, с которыми вы будете постоянно работать во frontend: string, number, boolean, null, undefined, symbol и bigint. На практике для TaskFlow чаще всего нужны строки, числа и логические значения. Symbol и bigint встретятся реже и будут показаны при необходимости.

Контекст. Тип данных — это «вид вещи», которую мы храним. От типа зависит, что с вещью можно делать.

const title = "Изучить Angular"; // string — текст в кавычках
const count = 3;                // number — число
const completed = false;        // boolean — true или false
const emptyValue = null;        // null — «значения нет, и это подтверждено»
let notAssigned;                // undefined — «значение ещё не присвоено»

Что увидит пользователь: сами по себе эти строки ничего не выводят, но каждая переменная теперь «знает своё место» в программе.

JavaScript динамически типизирован во время выполнения: одна переменная может получить значение другого типа. TypeScript помогает обнаруживать часть таких проблем ещё до запуска.

5. Сравнения и строгая проверка

Оператор === проверяет строгое равенство без неявного приведения типов между разными типами. В современном коде frontend именно он обычно предпочтителен.

Контекст. В TaskFlow мы сравниваем, например, task.completed === true, чтобы понять, выполнена ли задача.

5 === 5       // true  — одинаковые числа
5 === "5"     // false — число против текста: типы разные

5 == "5"      // true  — нестрогое сравнение «простило» разницу типов
5 === "5"     // false

Что увидит пользователь: в консоли true, false, true, false — именно в таком порядке.

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

6. Условия и guard clauses

if позволяет выполнить код только при выполнении условия. Guard clause — ранняя проверка, которая сразу завершает функцию при невозможном или нежелательном состоянии.

Контекст. В TaskFlow функция «отметить задачу выполненной» сначала проверяет: а существует ли задача вообще?

function completeTask(task) {
  if (!task) {
    return; // охранник: задачи нет — выходим сразу
  }

  if (task.completed) {
    return; // уже выполнена — выходим, менять нечего
  }

  task.completed = true; // только здесь — основная работа
}

Разбор по шагам:

1. Заходим в функцию с задачей.
2. Если задачи нет — уходим (guard clause).
3. Если задача уже выполнена — уходим.
4. Только если обе проверки пройдены — ставим completed = true.

Guard clauses уменьшают вложенность. В больших компонентах это особенно удобно: сначала обрабатываются ошибочные случаи, затем основной сценарий.

7. Циклы и перебор данных

Классический цикл for полезен, когда нужен контроль над индексом или количеством шагов. Но в frontend часто важнее выразить операцию над коллекцией через методы массива.

Контекст. В TaskFlow нужно перебрать все задачи, чтобы, например, показать их списком на экране.

// предположим, что tasks — массив задач из раздела 8
for (let i = 0; i < tasks.length; i++) {
  console.log(tasks[i].title); // выводим заголовок по индексу i
}

for (const task of tasks) {
  console.log(task.title); // перебираем сами объекты задач
}

Что увидит пользователь: в консоли напечатаются заголовки всех задач (оба цикла дадут один и тот же результат, просто разными способами).

На следующем этапе мы увидим map, filter и find. Они лучше описывают намерение программы.

8. Массивы

Массив хранит упорядоченную коллекцию значений. В TaskFlow это список задач.

Контекст. Массив — главная «таблица данных» нашего приложения: в нём лежат все задачи по порядку.

const tasks = [
  { id: 1, title: "Изучить HTTP", completed: true },
  { id: 2, title: "Изучить Angular", completed: false },
  { id: 3, title: "Изучить React", completed: false }
];

console.log(tasks.length); // сколько всего задач (3)
console.log(tasks[0]);     // первая задача (с id: 1)
tasks.push({ id: 4, title: "Git", completed: false }); // добавили задачу в конец

Разбор по шагам:

1. Создаём массив из трёх задач.
2. tasks.length — число элементов (3).
3. tasks[0] — доступ к первому элементу по индексу.
4. push — «прицепляет» новую задачу в хвост массива.

Что увидит пользователь: в консоли 3, затем объект первой задачи, а массив теперь содержит 4 задачи.

Индекс начинается с нуля. Поэтому tasks[0] — первая задача.

9. map, filter, find и reduce

Эти методы становятся частью ежедневного языка frontend-разработчика.

Контекст. В TaskFlow: filter оставит только активные задачи, map превратит их в заголовки, find найдёт одну нужную, reduce посчитает, сколько выполнено.

const titles = tasks.map(task => task.title);
// ["Изучить HTTP", "Изучить Angular", "Изучить React"]

const active = tasks.filter(task => !task.completed);
// [объекты с completed: false]

const selected = tasks.find(task => task.id === 2);
// { id: 2, title: "Изучить Angular", completed: false }

const completedCount = tasks.reduce(
  (count, task) => count + (task.completed ? 1 : 0),
  0
); // 1

Разбор по шагам (на примере reduce):

1. Начинаем с count = 0 (второй аргумент reduce).
2. Для каждой задачи: если выполнена — прибавляем 1, иначе 0.
3. В итоге count = количество выполненных.

Что увидит пользователь: titles — массив строк, active — массив невыполненных задач, selected — одна задача, completedCount = 1.

map создаёт новую коллекцию преобразованных значений. filter оставляет подходящие элементы. find ищет первый подходящий элемент. reduce сворачивает коллекцию в одно итоговое значение.

10. Объекты

Объект объединяет связанные значения по именованным свойствам.

Контекст. В TaskFlow каждая задача — это объект: у неё есть id, заголовок и статус.

const task = {
  id: 1,
  title: "Изучить TypeScript",
  completed: false
};

console.log(task.title);  // читаем свойство
task.completed = true;    // меняем свойство

Что увидит пользователь: console.log напечатает Изучить TypeScript, а после присваивания задача считается выполненной.

Объекты — основа данных frontend. API возвращает объекты, формы создают объекты, компоненты получают объекты, state хранит объекты.

11. Деструктуризация

Деструктуризация позволяет получить значения из объекта или массива по имени или позиции.

Контекст. Вместо того чтобы писать task.title снова и снова, мы «вытаскиваем» нужные поля сразу.

const task = {
  id: 1,
  title: "Изучить TypeScript",
  completed: false
};

const { id, title, completed } = task; // достали три поля сразу

console.log(title); // можно использовать напрямую

Разбор по шагам:

1. Берём объект task.
2. В фигурных скобках перечисляем имена полей, которые хотим вытащить.
3. Теперь title, id, completed — отдельные переменные.

В React вы постоянно встретите конструкцию вроде function TaskItem({ task }). Это деструктуризация параметра функции. В Angular деструктуризация используется аналогично, например при обработке данных внутри метода класса компонента: const { title, completed } = this.task;.

12. Spread и Rest

Оператор spread ... позволяет развернуть элементы. При работе с объектами он часто используется для создания обновлённой копии.

Контекст. В TaskFlow, когда мы меняем задачу, важно не «портить» старую, а сделать новую копию с изменением.

// task = { id: 1, title: "Изучить TypeScript", completed: false }
const updatedTask = {
  ...task,          // скопировали все поля старой задачи
  completed: true   // и перезаписали одно поле
};

Что увидит пользователь: updatedTask равен { id: 1, title: "Изучить TypeScript", completed: true }, а исходный task не изменился.

Это особенно важно для state: вместо изменения исходного объекта мы создаём новый объект с нужным изменением.

Rest

function logTask(id, ...labels) {
  console.log(id);
  console.log(labels);
}

logTask(1, "важно", "срочно"); // labels = ["важно", "срочно"]

В rest-параметр попадают остальные аргументы.

13. Функции и параметры

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

Контекст. В TaskFlow функция toggleTask переключает статус задачи «выполнена/не выполнена».

function toggleTask(task) {
  return {
    ...task,
    completed: !task.completed // инвертируем: было true → стало false, и наоборот
  };
}

const next = toggleTask({
  id: 1,
  title: "Learn",
  completed: false
});

Разбор по шагам:

1. Вызываем toggleTask с задачей.
2. Внутри делаем копию задачи и переворачиваем completed.
3. Возвращаем новую задачу, старую не трогая.

Что увидит пользователь: next будет { id: 1, title: "Learn", completed: true }.

Хорошая функция делает одну понятную операцию и имеет ясный контракт.

14. Arrow functions

Arrow function — компактный синтаксис функции.

Контекст. В TaskFlow мы пишем их внутри map/filter: tasks.filter(task => !task.completed).

const add = (a, b) => a + b; // одно выражение: return не нужен

const titles = tasks.map(task => task.title); // достаём заголовки

const active = tasks.filter(task => !task.completed); // только активные

// стрелочная функция с несколькими инструкциями
const processTask = (task) => {
  const updated = { ...task };
  updated.completed = true;
  return updated; // здесь return обязателен
};

Разбор по шагам:

1. Если тело — одно выражение после =>, результат возвращается автоматически.
2. Если тело в {} — нужно писать return явно.

Arrow functions особенно часто используются в callback-операциях. Обратите внимание на отсутствие return в стрелочной функции с одним выражением и наличие фигурных скобок и явного return в функции с несколькими инструкциями.

15. Callback-функции

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

Контекст. В TaskFlow: когда пользователь нажимает «выполнить», мы передаём функцию-обработчик, которая сработает в момент клика.

function runOperation(operation) {
  operation(); // вызываем переданную функцию в нужный момент
}

runOperation(() => {
  console.log("Выполняем операцию");
});

Что увидит пользователь: в консоли появится Выполняем операцию — потому что runOperation вызвала переданный callback.

React event handlers и многие методы массивов используют callback-функции. Angular template также приводит нас к обработчикам событий, которые вызывают методы класса.

16. Замыкания

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

Контекст. В TaskFlow это пригодится, чтобы «запомнить» состояние между действиями, например счётчик выполненных задач.

function createCounter() {
  let count = 0; // «блокнот» в кармане

  return function () {
    count++;       // каждый вызов прибавляет 1
    return count;
  };
}

const counter = createCounter();

console.log(counter()); // 1
console.log(counter()); // 2

Разбор по шагам:

1. createCounter создаёт переменную count = 0 и возвращает внутреннюю функцию.
2. Внутренняя функция «помнит» count (замыкание).
3. Каждый вызов counter() увеличивает и возвращает счётчик.

Что увидит пользователь: 1, затем 2.

Это полезно для понимания private-состояния, callback-функций и некоторых паттернов Hooks. Например, в React хук useState использует замыкание для хранения значения между рендерами компонента.

17. this: почему он вызывает вопросы

this в JavaScript зависит от контекста вызова. Для новичка важно не пытаться вывести одно универсальное правило из всех случаев. Лучше понимать разницу между обычной функцией и arrow function.

Контекст. В объекте user метод sayHello обращается к this.name — то есть к имени самого пользователя.

const user = {
  name: "Anna",
  sayHello() {
    console.log(this.name); // this → user, поэтому "Anna"
  }
};

user.sayHello(); // Anna

// Разница с arrow function:
const user2 = {
  name: "Bob",
  delayedHello() {
    setTimeout(function () { console.log(this.name); }, 100);
    // undefined — обычная функция потеряла контекст user2
  },
  delayedHelloArrow() {
    setTimeout(() => { console.log(this.name); }, 100);
    // "Bob" — arrow захватывает внешний this
  }
};

Что увидит пользователь: user.sayHello() напечатает Anna; в delayedHello через таймер придёт undefined, а в delayedHelloArrow — Bob.

В современных React function components мы часто избегаем ручной работы с this. В Angular класс компонента использует обычный контекст экземпляра, поэтому там проблема выглядит иначе.

18. Модули ES

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

Контекст. В TaskFlow тип Task мы вынесем в отдельный файл и будем «подключать» его, где нужно.

// task.ts
export type Task = {
  id: number;
  title: string;
  completed: boolean;
};

// task-utils.ts
import type { Task } from "./task"; // берём тип Task из соседнего файла

export function toggleTask(task: Task): Task {
  return { ...task, completed: !task.completed };
}

И Angular, и React активно используют ES modules. Поэтому import/export нужно знать уверенно.

19. Что делает import

import связывает текущий модуль с экспортом другого модуля. В TypeScript часто используется import type для импорта только типа.

Контекст. В TaskFlow мы пишем import type { Task } from "./types", чтобы просто «знать форму» задачи, не подключая лишний код.

import { useState } from "react"; // значение (функция) — нужно браузеру
import type { Task } from "./types"; // только описание типа — для проверки

Разделение типов и runtime-значений помогает понимать, что действительно понадобится браузеру, а что существует только на этапе проверки типов.

20. Promise

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

Контекст. В TaskFlow, когда мы загружаем задачи с сервера, ответ приходит не мгновенно — Promise «обещает» его дать позже.

const result = fetch("https://example.com"); // result — это Promise (талончик)

result
  .then(response => response.text()) // когда готово — берём текст
  .then(html => console.log(html))  // и печатаем
  .catch(error => console.error(error)); // если ошибка — ловим её

Разбор по шагам:

1. fetch сразу возвращает Promise, не дожидаясь ответа.
2. .then срабатывает, когда данные пришли успешно.
3. .catch срабатывает, если что-то пошло не так.

MDN описывает Promise как основу современной асинхронной модели JavaScript; async/await строится поверх Promise.

21. async/await

Синтаксис async/await позволяет писать асинхронный код в форме, которая напоминает последовательную программу.

Контекст. В TaskFlow загрузка задач с сервера выглядит как обычная последовательность: «подожди ответ, прочитай JSON, верни результат».

async function loadTasks() {
  const response = await fetch("http://localhost:3000/tasks"); // ждём ответ
  const tasks = await response.json(); // ждём превращения в данные

  return tasks; // возвращаем готовый массив
}

Что увидит пользователь: функция вернёт Promise, который в итоге даст массив задач (если сервер ответил).

await приостанавливает выполнение текущей async-функции до завершения Promise. Он не блокирует весь браузер.

22. Обработка ошибок

Для сетевого и пользовательского кода ошибка — нормальный сценарий, а не исключение, которое можно игнорировать.

Контекст. В TaskFlow загрузка может упасть (сервер лёг, нет сети) — мы должны это перехватить и показать сообщение.

async function loadTasks() {
  try {
    const response = await fetch("http://localhost:3000/tasks");

    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`); // сами бросаем ошибку
    }

    return await response.json();
  } catch (error) {
    console.error("Не удалось загрузить задачи", error);
    throw error; // пробрасываем дальше, чтобы вызвавший код тоже узнал
  }
}

Разбор по шагам:

1. В try пытаемся загрузить данные.
2. Если сервер ответил ошибкой — сами выбрасываем исключение через throw.
3. Блок catch ловит любую ошибку и сообщает о ней.

Обратите внимание: fetch() не выбрасывает исключение только потому, что сервер вернул HTTP 404 или 500. Поэтому проверяем response.ok самостоятельно.

23. fetch и граница HTTP

fetch связывает JavaScript с HTTP. Frontend формирует запрос, получает Response и преобразует тело ответа, например, через response.json().

Контекст. В TaskFlow fetch — это «телефон» к серверу: мы звоним по адресу и просим список задач.

// эти строки должны быть внутри async-функции
const response = await fetch("http://localhost:3000/tasks"); // звоним на сервер
const tasks = await response.json(); // распаковываем посылку в данные

console.log(tasks);

Что увидит пользователь: в консоли — массив задач, присланных сервером (или ошибка, если сервер не отвечает).

24. Что JavaScript делает в браузере

Браузер предоставляет JavaScript API: DOM, events, fetch, timers, storage и другие возможности. Язык JavaScript сам по себе не определяет DOM. DOM и fetch предоставляет среда браузера.

Контекст. Понимание границы «что есть в языке, а что дал браузер» помогает не путаться, почему один и тот же код работает в браузере, но не в Node.js.

Эта граница полезна, когда одна и та же программа запускается в браузере и в Node.js: набор доступных глобальных API отличается.

25. TypeScript: зачем нужен статический анализ

TypeScript проверяет JavaScript-программы до запуска и позволяет описать ожидаемые типы.

Официальный TypeScript Handbook определяет TypeScript как статический type checker для JavaScript-программ: он работает до выполнения и проверяет корректность типов.

Контекст. В TaskFlow TypeScript следит, чтобы мы случайно не передали в задачу число вместо текста.

function greet(name: string) {
  return `Привет, ${name}`;
}

greet("Анна");
// greet(123); // ошибка типов: ожидается строка, а не число

Что увидит пользователь: рабочий вызов напечатает Привет, Анна; закомментированный вызов выдаст ошибку ещё до запуска в редакторе.

TypeScript не превращает JavaScript в «безопасный язык» и не проверяет реальный JSON с сервера автоматически. Он делает статические предположения, которые нужно поддерживать корректными.

26. Основные типы TypeScript

Для ежедневного frontend достаточно сначала уверенно знать string, number, boolean, массивы, объекты, union types и функции. Официальная документация TypeScript отдельно разбирает примитивы и функции как базовые конструкции.

Контекст. В TaskFlow: заголовок — string, количество — number, статус — boolean.

let title: string = "TaskFlow";    // только текст
let count: number = 10;            // только число
let completed: boolean = false;    // только да/нет

let tags: string[] = ["web", "frontend"]; // массив только из текста

В JavaScript число не разделяется на типы integer и float на уровне языка; в TypeScript соответствующий тип — number.

27. Type annotations и inference

Annotation — явное указание типа. Inference — способность TypeScript вывести тип самостоятельно.

Контекст. В TaskFlow часто пишут просто const count = 10 — и TypeScript сам понимает, что это number.

const title: string = "Angular"; // annotation — подписали явно
const count = 10; // inference — TypeScript выводит number сам

const task = {
  id: 1,
  title: "React",
  completed: false
}; // TypeScript вывел форму объекта автоматически

Не нужно указывать тип там, где TypeScript очевидно его выводит. Ценность типов растёт на границах: функции, публичные API, модели данных и сложные структуры.

28. Arrays, objects и readonly

Типизация коллекций помогает определить, какие элементы разрешены.

Контекст. В TaskFlow поле id мы хотим защитить от случайного изменения — помечаем readonly.

const titles: string[] = ["Angular", "React"]; // массив только строк

type Task = {
  readonly id: number; // id нельзя переназначить
  title: string;
  completed: boolean;
};

const task: Task = {
  id: 1,
  title: "TypeScript",
  completed: false
};

// task.id = 2; // ошибка: id защищён

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

29. Type aliases

Type alias даёт имя существующему описанию типа.

Контекст. В TaskFlow мы назовём «номер задачи» через TaskId, чтобы не писать number везде.

type TaskId = number; // прозвище для number

type Task = {
  id: TaskId;        // то же, что id: number
  title: string;
  completed: boolean;
};

Type aliases особенно удобны, когда тип используется многократно или его смысл становится важной частью архитектуры.

30. Interfaces

Interface — способ описать форму объекта. В frontend он часто используется для моделей и входных параметров.

Контекст. В TaskFlow interface Task — это «чертёж» задачи, по которому проверяются все данные.

interface Task {
  id: number;
  title: string;
  completed: boolean;
}

function renderTask(task: Task) {
  console.log(task.title); // знаем: у task точно есть title
}

TypeScript поддерживает и interfaces, и type aliases. Для большинства простых объектных моделей оба подхода подходят. В дальнейшем курс будет использовать оба, объясняя, почему выбран конкретный вариант.

31. Union types

Union type означает: значение может быть одним из нескольких допустимых типов.

Контекст. В TaskFlow статус задачи — только один из трёх: "todo" | "doing" | "done".

type Status = "todo" | "doing" | "done"; // только эти три значения

let status: Status = "todo";

status = "done";
// status = "cancelled"; // ошибка: такого варианта нет в union

Union types особенно полезны для UI-статусов. Вместо произвольной строки мы ограничиваем возможные состояния. Здесь мы используем строки как типы — это называется literal types и подробно разбирается в следующем разделе.

32. Literal types и discriminated unions

Literal type ограничивает значение конкретным литералом. Несколько литералов можно объединить в union.

Контекст. В TaskFlow состояние загрузки удобно описать через kind: «loading / success / error».

// предполагается, что тип Task определён в другом файле
type Priority = "low" | "medium" | "high";

type TaskState =
  | { kind: "loading" }                          // грузим
  | { kind: "success"; tasks: Task[] }           // успех: есть задачи
  | { kind: "error"; message: string };          // ошибка: есть текст

Поле kind называется discriminant. По нему TypeScript может сузить тип внутри условия. Такой подход особенно полезен для состояния загрузки, ошибки и успеха.

33. Optional properties и null

Знак ? означает, что свойство может отсутствовать.

Контекст. В TaskFlow фильтр может не иметь поискового слова — тогда поле search просто не указано.

type Priority = "low" | "medium" | "high";

interface TaskFilter {
  search?: string;   // может быть, а может не быть
  priority?: Priority;
}

Null и undefined — разные состояния. Например, undefined может означать отсутствие свойства или отсутствие присвоенного значения, а null — явно заданное отсутствие значения.

function printOwner(owner: string | null) {
  if (owner === null) {
    console.log("Без владельца");
    return; // выходим, если владельца нет
  }

  console.log(owner); // здесь owner точно строка
}

34. Function types

В TypeScript можно описывать не только данные, но и форму функции.

Контекст. В TaskFlow мы опишем «предикат задачи» — функцию, которая говорит, подходит ли задача.

// предполагается, что тип Task определён в другом файле
type TaskPredicate = (task: Task) => boolean; // берёт Task, возвращает true/false

const isCompleted: TaskPredicate =
  task => task.completed; // подходит: берёт задачу, возвращает boolean

Это позволяет передавать функции как значения и сохранять типовой контракт между вызывающим кодом и callback.

Официальная документация TypeScript описывает сигнатуры функций как отдельный типовой механизм.

35. Generics

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

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

Контекст. В TaskFlow first<Task> вернёт именно задачу, а не «что-то непонятное».

function first<T>(items: T[]): T | undefined {
  return items[0]; // возвращаем первый элемент (или undefined)
}

const firstTask = first(tasks);       // TypeScript знает: Task | undefined
const firstTitle = first(["Angular", "React"]); // знает: string | undefined

В первом случае TypeScript выводит Task | undefined, во втором — string | undefined. Официальный Handbook показывает generics как способ сохранять связь между типами входных и выходных данных.

36. Generic Task API

Generics особенно понятны, когда мы строим маленькие универсальные функции API.

Контекст. В TaskFlow мы сделаем универсальную getJson<T>, которая загружает данные любого типа.

// import type { Task } from "./task";
async function getJson<T>(url: string): Promise<T> {
  const response = await fetch(url);

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`); // ошибка сети/сервера
  }

  return await response.json() as T; // говорим TypeScript: результат типа T
}

const tasks = await getJson<Task[]>(
  "http://localhost:3000/tasks"
);

Здесь generic говорит вызывающему коду, какой тип результата он ожидает. Но важно: type assertion не проверяет фактический JSON. Это только утверждение для type checker. Поэтому в production при недоверенных данных могут использоваться runtime-схемы или валидаторы.

Песочница: generics на практике

▶️ Попробуйте сами: функция first без generic теряет тип элемента. В TypeScript запись first<Task>(tasks) вернула бы именно Task, а не any.

37. any, unknown и почему они разные

any практически отключает типовую проверку для значения. unknown наоборот говорит: «мы пока не знаем тип, поэтому сначала проверь». Для внешних данных unknown безопаснее как стартовая точка.

Контекст. В TaskFlow данные с сервера сначала неизвестны — берём unknown, а не any.

let unsafe: any = "hello";
unsafe.notExisting.method(); // TypeScript не защищает — может упасть при запуске

let external: unknown = "hello";

// external.toUpperCase(); // ошибка: тип неизвестен

if (typeof external === "string") {
  external.toUpperCase(); // только после проверки — можно
}

Что увидит пользователь: со строкой после проверки toUpperCase() вернёт HELLO; а any пропустит даже заведомо сломанный вызов.

38. Type assertions и осторожность

Type assertion сообщает TypeScript, что вы как разработчик считаете значение конкретного типа.

Контекст. В TaskFlow иногда мы «знаем лучше компилятора», что значение — строка, и пишем as string.

const value: unknown = "Angular";

const text = value as string; // говорим TypeScript: доверяй, это string

Assertion не изменяет runtime-значение и не проверяет его. Поэтому это инструмент доверия, а не валидации.

39. TypeScript и JSON из API

JSON приходит во время выполнения. TypeScript-код не может «превратить» неправильный JSON в правильный только потому, что вы написали интерфейс.

Контекст. В TaskFlow сервер может прислать «кривой» ответ — TypeScript этого до запуска не узнает.

interface Task {
  id: number;
  title: string;
  completed: boolean;
}

const raw: unknown = await response.json(); // что там — не знаем до проверки

Следующий уровень зрелости frontend — runtime validation: проверить, что raw действительно имеет ожидаемую форму. Сегодня нам важно запомнить границу: TypeScript контролирует исходный код, а серверные данные нужно рассматривать как внешние.

40. Архитектура модели Task

Прежде чем писать Angular и React-компоненты, определим единый тип Task. Тогда две реализации приложения будут работать с одной логической моделью.

Контекст. Один общий «чертёж» задачи используется и в Angular, и в React — это связующая нить курса.

export type Priority = "low" | "medium" | "high";

export interface Task {
  id: number;
  title: string;
  description?: string;
  completed: boolean;
  priority: Priority;
  createdAt: string;
}

Такой контракт станет общей нитью всего курса.

41. Практика: JavaScript-версия TaskFlow

Сначала создадим маленькую версию логики без Angular и React. Цель — закрепить язык до перехода к framework.

▶️ Ниже — песочница, где можно запустить весь пример. А пока разберём код по шагам.

// Массив задач — «база данных» в памяти для примера
const tasks = [
  { id: 1, title: "Изучить JS", completed: false },   // completed: false — задача ещё активна
  { id: 2, title: "Изучить TS", completed: true },     // completed: true — задача выполнена
  { id: 3, title: "Создать Angular", completed: false }
];

// items — произвольный массив задач; фильтруем только невыполненные
function getActiveTasks(items) {
  // filter оставляет элементы, для которых предикат вернул true
  return items.filter(task => !task.completed);
}

// Выводим в консоль результат фильтрации
console.log(getActiveTasks(tasks));

Что увидит пользователь: в консоли останутся только невыполненные задачи (id 1 и 3).

// items — исходный массив, id — какую задачу переключить
function toggleTask(items, id) {
  // map создаёт НОВЫЙ массив, старый не меняем
  return items.map(task =>
    // если id совпал — инвертируем completed через spread-копию
    task.id === id
      ? { ...task, completed: !task.completed }
      : task // иначе возвращаем задачу без изменений
  );
}

42. Практика: TypeScript-модель Task

Теперь перенесём модель в TypeScript.

Контекст. Опишем «чертёж» задачи в отдельном файле, чтобы потом переиспользовать в Angular и React.

// Union type: приоритет — только одно из трёх допустимых значений
export type Priority = "low" | "medium" | "high";

// Общий контракт задачи для всего курса
export interface Task {
  id: number;          // уникальный числовой идентификатор
  title: string;       // заголовок задачи
  completed: boolean;  // выполнена ли задача (НЕ путать с TaskFilter "done")
  priority: Priority;  // приоритет из union type выше
}

// Аннотация типа: ожидаем объект, соответствующий Task
const task: Task = {
  id: 1,
  title: "TypeScript",
  completed: false,
  priority: "urgent" // ошибка: "urgent" нет в union Priority
};

43. Практика: фильтрация и преобразование задач

Используем типизированные функции.

Контекст. Напишем три функции для TaskFlow: «только выполненные», «только заголовки», «найти по id» — и укажем их типы.

// import type { Task } from "./task";
// Вход: массив Task. Выход: тоже Task[] (только выполненные)
function getCompleted(tasks: Task[]): Task[] {
  return tasks.filter(task => task.completed); // оставляем completed === true
}

// Вход: Task[]. Выход: string[] — массив заголовков
function getTitles(tasks: Task[]): string[] {
  return tasks.map(task => task.title); // преобразуем каждую задачу в строку
}

// Вход: массив и id. Выход: Task | undefined — задача может не найтись
function findTask(
  tasks: Task[],
  id: number
): Task | undefined {
  return tasks.find(task => task.id === id); // первый совпавший или undefined
}

Задача студента — объяснить, почему return type указан именно так.

44. Практика: mock API и async/await

Используйте mock API из первого занятия. Если он ещё не запущен:

cd taskflow-api
npm install
npm run api

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

// import type { Task } from "./task";
// async → функция возвращает Promise; тип результата Promise<Task[]>
async function loadTasks(): Promise<Task[]> {
  // await приостанавливает функцию до получения Response
  const response = await fetch(
    "http://localhost:3000/tasks"
  );

  // fetch НЕ падает при 404/500, поэтому проверяем сами
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`); // явная ошибка → попадёт в catch
  }

  // await + .json() парсит тело ответа в массив задач
  return await response.json();
}

Разбор по шагам:

1. Ждём ответа сервера (await fetch).
2. Если статус не OK — бросаем ошибку.
3. Читаем тело как JSON и возвращаем массив задач.

Здесь соединяются сразу несколько тем: function, Promise, generic-like return annotation, fetch, JSON и Task.

45. Практика: обработка ошибок

Добавим отдельную функцию верхнего уровня.

Контекст. «Обертка» run() ловит любые ошибки загрузки и показывает понятное сообщение.

// Верхнеуровневая обёртка: сама ничего не знает про сеть
async function run() {
  try {
    // здесь выполняется «счастливый» сценарий
    const tasks = await loadTasks(); // если loadTasks бросит ошибку — уйдём в catch

    console.log("Загружено:", tasks.length);
  } catch (error) {
    // сюда попадаем при любой ошибке выше (сеть, !ok, JSON)
    console.error("Ошибка загрузки", error);
  }
}

run(); // запускаем верхнеуровневую функцию

Попробуйте временно изменить порт API с 3000 на 3001. Посмотрите, что произойдёт. Затем верните правильный порт.

46. Практика: подготовка к Angular

Контекст. В следующих уроках тот же Task будет использовать Angular. Уже сейчас подготовим файл модели, чтобы не переделывать потом.

src/app/models/task.ts

В Angular файл можно импортировать через обычный ES module import:

import type { Task } from "./models/task";

Это важный момент: язык и типовая модель не являются «собственностью React» или «собственностью Angular». Они общие.

47. Практика: подготовка к React

Контекст. В React тип модели тоже хранится отдельно; компонент получает задачу через props.

src/types/task.ts

import type { Task } from "./types/task";

Компонент получает Task через props:

function TaskItem({ task }: { task: Task }) {
  return (
    <article>
      <h2>{task.title}</h2>
    </article>
  );
}

Что увидит пользователь: на экране появится заголовок задачи внутри карточки article с подзаголовком h2.

Именно поэтому TypeScript удобно изучать до framework: один и тот же язык работает в обеих экосистемах.

48. Самостоятельная работа

Контекст. Закрепите темы урока: типы, приоритеты, обновление задач, generics и загрузку с API. Ниже — задания и песочница, где можно потренироваться.

49. Подсказки к самостоятельной работе

Контекст. Если застряли — сверьтесь с образцами. Главное: типы указывают, что ожидается на входе и выходе.

interface Task {
  id: number;
  title: string;
  completed: boolean;
  priority: Priority;
  assignee: string | null; // добавленное поле
}

function getHighPriorityTasks(tasks: Task[]) {
  return tasks.filter(task => task.priority === "high");
}

function renameTask(task: Task, title: string): Task {
  return { ...task, title };
}

function first<T>(items: T[]): T | undefined {
  return items[0];
}

const tasks = await loadTasks();
const high = tasks.filter(task => task.priority === "high");
console.log(high.length);

if (!response.ok) {
  throw new Error(`HTTP ${response.status}`);
}

response.ok равно false для всех статусов вне диапазона 200-299, включая 404 и 500.

Совет: сначала сравните идею с вашим решением, а уже потом смотрите код целиком.

50. Контрольные вопросы

1. Почему const не означает неизменяемый объект?
2. Что такое область видимости?
3. Чем map отличается от filter?
4. Что такое callback?
5. Зачем нужны ES modules?
6. Что возвращает async-функция?
7. Что такое Promise?
8. Почему нужно проверять response.ok?
9. Что проверяет TypeScript до запуска?
10. Что такое type inference?
11. Чем interface отличается от обычного объекта runtime?
12. Что такое union type?
13. Что делает readonly?
14. Для чего нужны generics?
15. Почему unknown безопаснее any?
16. Может ли TypeScript проверить, что JSON с API реально соответствует интерфейсу?
17. Что такое type assertion?
18. Почему spread полезен при обновлении state?
19. Как функция может вернуть новый объект, не изменяя исходный?
20. Какая связь между TypeScript и Angular/React?

51. Мини-словарь

Краткий справочник терминов урока. Если забыли аналогию — вернитесь к нужному разделу выше.

52. Чек-лист урока

• Я уверенно использую const и let.
• Я понимаю область видимости.
• Я умею работать с массивами и объектами.
• Я понимаю map/filter/find/reduce.
• Я умею писать и передавать функции.
• Я понимаю callback и arrow function.
• Я понимаю модули import/export.
• Я понимаю Promise и async/await.
• Я умею обрабатывать ошибки сетевого запроса.
• Я понимаю, зачем нужен TypeScript.
• Я умею создавать interface и type alias.
• Я понимаю union types.
• Я знаю назначение generics.
• Я понимаю разницу между any и unknown.
• Я могу описать модель Task и использовать её в функции.
• Я готов переносить эти знания в Angular и React.

53. Источники и материалы для продолжения

Материал основан на официальной документации и общих механизмах JavaScript/TypeScript.

Актуальность веб-ссылок и терминологии сверена с официальными материалами на август 2026 года. TypeScript Handbook обновлялся в июле 2026 года. MDN описывает Promise и async/await как фундамент современной асинхронной модели JavaScript.