Какие использовал встроенные React типы?

Встроенные типы React: от базовых до продвинутых

В React TypeScript используется обширная система встроенных типов, которая обеспечивает безопасность типов и улучшает DX (Developer Experience). Я разделю их на несколько ключевых категорий.

1. Базовые типы компонентов и пропсов

React.ComponentType<P> — один из самых фундаментальных типов. Это объединение (union) React.ComponentClass<P> и React.FunctionComponent<P>. Используется, когда нужно принять компонент в качестве пропса.

type ModalProps = {
  content: React.ComponentType<{ message: string }>;
};

const Modal: React.FC<ModalProps> = ({ content: Content }) => {
  return <Content message="Hello!" />;
};

React.FC или React.FunctionComponent — типизация функционального компонента с детьми по умолчанию. Сейчас часто отказываются от него в пользу явного указания пропсов, но он всё ещё важен.

interface ButtonProps {
  title: string;
}

const Button: React.FC<ButtonProps> = ({ title, children }) => {
  return <button title={title}>{children}</button>;
};

2. Типы, связанные с элементами и узлами (React Elements & Nodes)

React.ReactElement — тип для объекта элемента React, созданного через React.createElement() или JSX. Принимает дженерик для пропсов и типа компонента.

const icon: React.ReactElement<IconProps> = <Icon name="star" />;

React.ReactNode — самый широкий тип, представляющий всё, что может быть отрендерено в React: string, number, boolean, null, undefined, ReactElement, массив ReactNode, портал и т.д. Используется для типизации children.

interface CardProps {
  children: React.ReactNode;
}

JSX.Element — практически аналог React.ReactElement, но более конкретный для JSX. Часто используется как возвращаемый тип компонента.

3. Типы для рефов (Refs)

React.RefObject<T> — тип для мутабельного ref объекта, созданного через useRef. Имеет свойство current.

const inputRef = useRef<HTMLInputElement>(null);
// Тип inputRef: React.RefObject<HTMLInputElement>

React.MutableRefObject<T> — более общий тип для мутабельных ref, когда current можно напрямую изменять. useRef<T>(initialValue) возвращает именно его для неуправляемых значений.

const timerRef = useRef<NodeJS.Timeout | null>(null);
// Тип timerRef: React.MutableRefObject<NodeJS.Timeout | null>

React.LegacyRef<T> — устаревший объединённый тип для строковых и callback ref. В современном коде используется редко.

4. Типы для событий (Events)

React.SyntheticEvent — базовый тип для всех событий React. Это обёртка над нативными событиями для кросс-браузерности.

const handleChange = (e: React.SyntheticEvent<HTMLInputElement>) => {
  console.log(e.currentTarget.value);
};

Конкретные типы событий: React.ChangeEvent<T>, React.MouseEvent<T>, React.KeyboardEvent<T>, React.FormEvent<T>, React.FocusEvent<T> и другие.

const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
  e.preventDefault();
  console.log(e.clientX, e.clientY);
};

5. Типы для хуков (Hooks)

React.Dispatch<A> — тип для функции dispatch из useReducer. A — тип action.

const [state, dispatch] = useReducer(reducer, initialState);
// Тип dispatch: React.Dispatch<Action>

React.SetStateAction<S> — тип для аргумента функции setState из useState. Может быть новым значением или функцией обновления.

const [count, setCount] = useState(0);
// Тип setCount: React.Dispatch<React.SetStateAction<number>>

React.DependencyList — тип для массива зависимостей хуков (useEffect, useMemo, useCallback). По сути, readonly any[].

6. Утилитарные и компонентные типы

React.ComponentProps<T> — извлекает тип пропсов из компонента (классового или функционального) или DOM-элемента. Невероятно полезен.

type ButtonProps = React.ComponentProps<'button'>;
type MyComponentProps = React.ComponentProps<typeof MyComponent>;

React.PropsWithChildren<P> — утилита, которая добавляет необязательное свойство children?: React.ReactNode к вашим пропсам P. Альтернатива React.FC.

type MyProps = React.PropsWithChildren<{ title: string }>;

React.ReactPortal — тип для портала, созданного через ReactDOM.createPortal.

7. Типы для контекста (Context)

React.Context<T> — тип объекта контекста, созданного через React.createContext.

const ThemeContext = React.createContext('light');
// Тип ThemeContext: React.Context<string>

React.Provider<T> и React.Consumer<T> — типы для Provider и Consumer компонентов контекста.

---

Практическое применение и выводы

В реальных проектах наиболее часто используются:

• React.ReactNode для children.
• React.ComponentProps для расширения пропсов нативных элементов или сторонних компонентов.
• Специфические типы событий вроде React.ChangeEvent<HTMLInputElement>.
• Типы для рефов React.RefObject<HTMLElement>.
• React.ComponentType для HOC (Higher-Order Components) и динамического импорта.

Понимание этих типов позволяет:

• Писать более надёжный и самодокументируемый код.
• Лучше интегрироваться со сторонними библиотеками.
• Избежать целого класса runtime-ошибок на этапе компиляции.
• Улучшить автодополнение и навигацию по коду в IDE.

Работа с TypeScript в React — это не просто аннотирование пропсов интерфейсами, а глубокая интеграция со встроенной системой типов React, которая делает разработку предсказуемой и эффективной.