Обзор проекта Event Me на курсе по TypeScript

Фронтенд собран с помощью бандлера (откроется в новой вкладке)Viteи работает напрямую с DOM: там есть формы для создания событий, обработчики кликов и функции для отрисовки списка событий на странице. Бэкенд написан на (откроется в новой вкладке)Node.js: он принимает запросы от фронтенда, обрабатывает данные о событиях, пользователях и RSVP (подтверждениях участия) и отвечает на них.

У каждого события в приложении есть набор свойств: идентификатор, название, описание, организатор и список RSVP от других пользователей. Пока эти данные нигде явно не описаны как тип — их структура держится только в голове у разработчика и в том, как код фактически обращается с объектами. Одна из главных задач ближайших уроков — зафиксировать эту структуру в виде интерфейсов, чтобы TypeScript мог проверять её автоматически.

До этого момента мы писали типы в изолированных примерах и небольших упражнениях. На реальном проекте всё иначе: код уже существует, работает и приносит пользу, а значит переход на TypeScript должен быть постепенным и безопасным. Нельзя просто переименовать все файлы в .ts и надеяться на лучшее.

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

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

Фронтенд

Фронтенд Event Me — это набор функций, которые работают с формами и элементами страницы напрямую через DOM API. Здесь нам предстоит типизировать HTML-элементы, обработчики событий и данные, которые пользователь вводит в формы.

Бэкенд

Бэкенд — это сервер на Node.js, который хранит и обрабатывает данные о событиях, пользователях и RSVP. Здесь мы создадим собственные интерфейсы для основных сущностей приложения и подключим типы из DefinitelyTyped для внешних зависимостей.

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

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

event-me/
├── frontend/
│   ├── src/
│   │   ├── main.js
│   │   ├── forms.js
│   │   └── events.js
│   └── package.json
├── backend/
│   ├── src/
│   │   ├── server.js
│   │   └── routes.js
│   └── package.json
└── package.json

Обратите внимание, что фронтенд и бэкенд — это два отдельных пакета со своими файлами package.json. Значит, и настраивать TypeScript для каждого из них нужно будет отдельно: у фронтенда своя базовая конфигурация под Vite и браузерное окружение, у бэкенда — своя, под Node.js. При этом часть типов, например описание события или пользователя, нам захочется использовать в обеих частях проекта одновременно, и мы обсудим, как это сделать без дублирования кода.

Мы будем двигаться постепенно, шаг за шагом превращая Event Me из JavaScript-приложения в типобезопасный проект на TypeScript.

1. Установим TypeScript как dev-зависимость и настроим tsconfig.json
2. Разберёмся с базовыми конфигурациями tsconfig для разных окружений
3. Переведём компоненты фронтенда на .ts и исправим возникшие ошибки
4. Настроим декларации типов для внешних пакетов вроде Vite
5. Создадим собственные типы для событий, пользователей и RSVP
6. Типизируем формы и взаимодействие с DOM
7. Переведём бэкенд на TypeScript и подключим типы из DefinitelyTyped
8. Научимся импортировать и экспортировать типы между модулями
9. Познакомимся со сквозной типобезопасностью и инструментами вроде Zod, vitest и TypeORM

Каждый из этих шагов мы разберём на реальном коде Event Me, а не на абстрактных примерах, поэтому вы увидите, с какими проблемами реально сталкиваются разработчики при переходе на TypeScript.

Вот как может выглядеть начальный tsconfig.json для такого постепенного перехода.

{
  "compilerOptions": {
    "target": "ES2020",
    "checkJs": true,
    "noImplicitAny": true,
    "strict": false
  }
}

Мы познакомились с проектом Event Me: узнали, из каких частей он состоит, почему его переход на TypeScript будет постепенным и какие задачи нас ждут на фронтенде и бэкенде.

В следующем уроке начнём практическую часть — установим TypeScript как dev-зависимость, настроим tsconfig.json и разберём ключевые опции компилятора для проекта Event Me.