Урок 12

Итоги курса

Курс о TypeScript в React.

Что ты узнал

  • Настройка — Vite, Next.js, tsconfig, env
  • Типизация пропсов — type, children, PropsWithChildren
  • Типизация событий — MouseEvent<T>, ChangeEvent<T>, FormEvent<T>
  • useState — вывод типов, union, дискриминатор
  • useRef — DOM и значения
  • useEffect — async, AbortController, catch (e: unknown)
  • Контекст — createContext<T | null>, хук с проверкой
  • useReducer — discriminated union, exhaustive check
  • Дженерик-компоненты — <T> перед пропсами
  • Формы — React Hook Form, Zod, keyof
  • API — клиент, TanStack Query, Zod

Ключевые идеи

Типы выводятся там, где возможно. Явно указывай только когда вывод неверный или слишком широкий.

Discriminated unions для пропсов и состояний. Разные варианты — разные наборы полей.

Хук с проверкой для контекста. Не T | null в потребителе, а T через useAuth.

Dispatch<Action> для reducer. Тип встроенный, не пиши свой.

Дженерики для переиспользования. List<T>, Select<T>, useArray<T>.

Zod для runtime-валидации. Тип из схемы, проверка данных из API.

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

  • Использовать any вместо unknown
  • Забыть children: ReactNode
  • Использовать e.target вместо e.currentTarget
  • useRef<HTMLInputElement>() без null
  • Async-функция в useEffect напрямую
  • Путать ReactNode и ReactElement
  • Импортировать тип без import type
  • Забыть keyof для обновления полей

Что дальше

  • React 19 — новые хуки, use, Actions
  • Server Components — типизация серверных данных
  • TanStack Query — продвинутое кеширование
  • tRPC — типобезопасный API без генерации
  • Zod — сложные схемы

Полезные ссылки

  • React TypeScript Cheatsheet: react-typescript-cheatsheet.netlify.app
  • Total TypeScript: totaltypescript.com
  • TanStack Query: tanstack.com/query
  • Zod: zod.dev
  • Type Challenges: github.com/type-challenges

Заключение

TypeScript и React — естественная пара. Типы делают компоненты документированными, ловят ошибки до рантайма и упрощают рефакторинг. Начинай с простой типизации пропсов и событий. Постепенно добавляй дженерики, дискриминаторы, Zod. Главное правило: типы должны помогать, а не мешать. Если тип становится слишком сложным — упрости или разбей на части.