# TypeScript в React: Полный гайд по типизации компонентов и хуков

Источник: https://www.youtube.com/watch?v=aJP1AbZSqz8
Канал: freeCodeCamp.org
Опубликовано: 08.07.2026

---

Использование TypeScript в связке с React стало стандартом индустрии, позволяя создавать более предсказуемый и безопасный код. В новом обучающем руководстве от freeCodeCamp Рэйчел Джонсон, преподаватель платформы Scrimba, детально разбирает процесс перевода существующего React-проекта на TypeScript, охватывая всё — от типизации хуков `useState` до работы с функциональными пропсами и утилитами типов [0:12].

## 🛠️ Настройка проекта и переход на TypeScript
[[JUMP:01:51]]

Процесс начинается с настройки рабочего окружения. Рэйчел Джонсон утверждает, что ручная установка TypeScript в существующий проект — это трудоемкий процесс, требующий сложной конфигурации `tsconfig.json`, установки множества пакетов и переименования файлов [01:57]. В качестве наиболее «чистого и безопасного» пути она рекомендует использовать сборщик Vite.

Для создания проекта используются следующие команды в терминале:

*   `npm create vite` — инициализация проекта [02:24].
*   Выбор фреймворка: **React**.
*   Выбор варианта: **TypeScript**.
*   `npm install` — установка зависимостей.

Автор обращает внимание на структуру конфигурационных файлов. В проекте на Vite файл `tsconfig.json` часто ссылается на другие конфигурации, такие как `tsconfig.app.json` и `tsconfig.node.json`, что позволяет гибко настраивать поведение TypeScript для разных частей приложения [03:18]. Также важными являются пакеты `@types/react` и `@types/react-dom`, которые обеспечивают декларации типов для стандартных библиотек React [03:06].

## 📝 Базовая типизация данных и функций
[[JUMP:05:02]]

Прежде чем переходить к компонентам, необходимо типизировать базовые данные. В примере с игрой «Assembly Endgame» используются массивы слов и объектов языков программирования.

Джонсон демонстрирует два способа типизации массивов объектов [07:07]:

1.  **Инлайновая типизация**: описание структуры объекта прямо в определении массива.
2.  **Кастомные типы (рекомендуемый способ)**: создание именованного типа через ключевое слово `type`. Например, `type Language = { name: string; backgroundColor: string; color: string; }` [07:49].

При работе с функциями в файле `utils.ts` важно указывать не только типы аргументов, но и тип возвращаемого значения. Если функция генерирует случайный индекс, она должна возвращать `number` [09:46]. Если функция принимает название языка для вывода сообщения, аргумент должен быть `string` [10:50]. В случаях, когда функция ничего не возвращает (например, только обновляет состояние), автор советует использовать тип `void` для явного указания намерений программиста [20:26].

## ⚓ Глубокое погружение в useState и Generic-типы
[[JUMP:14:07]]

Хук `useState` в React умеет выводить типы автоматически на основе начального значения. Однако, по мнению Рэйчел Джонсон, лучше использовать явную типизацию, чтобы сделать код максимально устойчивым к ошибкам [15:12].

Для этого используются «дженерики» (Generics) — угловые скобки после названия хука:

*   `useState<string>("")` — для строк.
*   `useState<string[]>([])` — для массивов строк. Без явного указания пустой массив будет типизирован как `any[]`, что лишает TypeScript смысла [15:12].

Джонсон объясняет, что под капотом `useState` настроен на получение типа через дженерик, который затем автоматически применяется и к текущему значению (getter), и к функции обновления (setter) [15:39]. Это позволяет избежать ситуаций, когда в состояние по ошибке пытаются записать данные неверного типа, например, `boolean` вместо `string` [14:46].

## 🧩 Типизация React-компонентов: JSX.Element vs React.FC
[[JUMP:25:12]]

Одной из ключевых тем урока стала типизация самих функциональных компонентов. Рэйчел Джонсон отмечает, что TypeScript обычно сам понимает, что функция возвращает JSX, но в больших проектах полезна явная аннотация.

Существует два основных подхода:

1.  **Аннотация возвращаемого значения `JSX.Element`**: автор предпочитает именно этот метод [26:41].
2.  **Использование `React.FC` (или `FunctionComponent`)**: этот тип автоматически включает `children` в пропсы, даже если они не используются. По словам ведущей, современные разработчики чаще выбирают `JSX.Element` из-за более строгого контроля над дочерними элементами и пропсами по умолчанию [27:21].

В случаях, когда компонент может возвращать пустоту (условный рендеринг), используется объединение типов (Union types): `JSX.Element | null` [29:08]. Это критично для компонентов вроде контейнера конфетти, который отображается только при победе [28:02].

## 📋 Работа с пропсами и утилитами типов
[[JUMP:29:24]]

Для типизации пропсов рекомендуется создавать отдельный тип для каждого компонента, следуя соглашению об именовании: `[ComponentName]Props` [33:03].

В сложных случаях, когда нужно передать только часть свойств существующего типа, на помощь приходят служебные типы TypeScript. Рэйчел демонстрирует использование `Omit` [40:11]:

*   `type StylesProps = Omit<Language, "name">` — это позволяет создать тип, который включает все свойства `Language`, кроме имени [40:25].

Особое внимание уделено **функциональным пропсам** (callback-функциям). Их синтаксис в TypeScript выглядит как стрелочная функция: `onAction: (param: string) => void` [46:35]. Если функция не принимает аргументов и ничего не возвращает, она записывается как `() => void` [46:48].

В завершение урока Джонсон подчеркивает, что TypeScript не меняет функционал приложения, но радикально улучшает читаемость кода и упрощает поиск багов на этапе разработки [50:31].