Первый проект на TypeScript: превращаем JavaScript-приложение в код с типами

TypeScript не заменяет JavaScript, а проверяет отношения между данными до запуска программы. Перенесём знакомый список задач в .ts, опишем объект Task, включим strict и увидим, как компилятор останавливает строку вместо boolean ещё до открытия браузера.

Изучать типы на переменных name: string скучно, потому что непонятно, какую ошибку они предотвращают. В мини-проекте связь видна сразу. Задача имеет id, title и done. Функция addTask должна принимать строку, toggleTask работает с числовым id, а render получает массив Task. Если перепутать поля, компилятор покажет строку.

Что TypeScript добавляет к JavaScript

Проект содержит index.html, src/main.ts и tsconfig.json. DOM-элементы ищутся через querySelector с generic-параметром, но результат всё равно может быть null. Функция must проверяет это во время выполнения и после throw сужает тип до T. Массив tasks явно хранит Task.

У проекта есть один главный маршрут: получить входные данные, проверить их, выполнить действие и показать результат. Если каждый этап можно проверить отдельно, ошибка перестаёт быть загадкой.

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

Переносим список задач в main.ts

Создайте каталог, выполните npm init -y и npm install -D typescript. Положите main.ts в src, настройте tsconfig.json и запустите npx tsc. В index.html подключите ./dist/main.js с type="module". Для автоматической пересборки используйте npx tsc --watch. Не подключайте .ts напрямую в обычный браузер.

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

function must<T extends Element>(value: T | null, name: string): T {
  if (!value) throw new Error("Не найден элемент: " + name);
  return value;
}

const form = must(document.querySelector<HTMLFormElement>("#task-form"), "form");
const input = must(document.querySelector<HTMLInputElement>("#task-title"), "input");
const list = must(document.querySelector<HTMLUListElement>("#task-list"), "list");
const tasks: Task[] = [];

function addTask(title: string): void {
  tasks.push({ id: Date.now(), title, done: false });
  render();
}

function render(): void {
  list.replaceChildren(...tasks.map((task) => {
    const item = document.createElement("li");
    item.textContent = (task.done ? "✓" : "○") + " " + task.title;
    item.addEventListener("click", () => {
      task.done = !task.done;
      render();
    });
    return item;
  }));
}

form.addEventListener("submit", (event) => {
  event.preventDefault();
  const title = input.value.trim();
  if (title) addTask(title);
  form.reset();
});

Большая часть типов выводится автоматически. Мы явно описываем форму данных и важные границы, но не пишем аннотацию у каждой локальной переменной. Так код остаётся читаемым, а компилятор получает достаточно информации.

Что отличает устойчивый проект от случайного успеха. Аннотации нужны там, где связывают части программы

Как компилятор выводит типы и сужает null

TypeScript строит модель программы до запуска. Когда tasks объявлен как Task[], push обязан получить объект с нужными полями. Когда task.done имеет boolean, оператор ! возвращает boolean, а строка запрещена. Generic в querySelector сообщает ожидаемый класс элемента, но не отменяет null: DOM может не содержать селектор.

Типы существуют только во время разработки. Если localStorage, fetch или пользовательская форма возвращают неожиданные данные, оператор as Task не проверит объект. Нужна runtime-валидация или собственная функция-предикат. Избегайте any: он отключает важную часть проверок и распространяется дальше по коду.

Создаём ошибку и читаем диагностику tsc

Соберите проект и добавьте две задачи. Затем намеренно замените done: false на done: "нет" и прочитайте диагностику tsc. Верните boolean. Удалите #task-list из HTML и запустите страницу: must должен дать понятную runtime-ошибку. После этого добавьте функцию toggleTask(id: number): void и перенесите переключение из render. Попробуйте вызвать её строкой.

Типы полезны, когда вы видите предотвращённую ошибку. Строка вместо boolean, null вместо элемента и неправильное имя фильтра больше не ждут случайного клика пользователя.

Четыре проверки перед следующим шагом. Каждая проверка предотвращает конкретный класс ошибки

Добавляем типы там, где они окупаются

Дальше вынесите Task и Filter в types.ts, добавьте модуль хранения и тест чистых функций. Для сетевых данных подключите схему runtime-валидации или напишите type guard. Не начинайте с сложных generics и utility types: сначала получите пользу от объектов, union, параметров и возвращаемых значений.

Как изучить тему в Кодике

В Кодике сначала повторите объекты, массивы, функции и DOM в JavaScript. Затем перенесите один небольшой файл в TypeScript и включите strict. Каждую новую конструкцию связывайте с конкретной ошибкой проекта.

Не пытайтесь запомнить весь API. В тренажёре Кодика сначала воспроизведите чистую логику без библиотеки, затем восстановите подключение и обработку ошибок. Финальный тест: объяснить проект по памяти и добавить одну свою функцию.

Что получится в итоге

Один TypeScript-файл описывает Task, безопасно находит DOM и не выпускает сборку, если boolean, id или фильтр получили неверный тип.