0Pricing
Frontend Academy · Урок

TypeScript с React: обобщения FC и хуки

Типизируйте компоненты React с обобщёнными свойствами, явно указывайте типы для useState и useRef и типизируйте пользовательские хуки, возвращающие кортежи

«TypeScript с React: обобщения FC и хуки» — бесплатный урок Frontend Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Типизация компонентов

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

// Recommended:
interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

function Button({ label, onClick, disabled }: ButtonProps) {
  return <button onClick={onClick} disabled={disabled}>{label}</button>;
}

Типизация дочерних элементов

Используйте React.ReactNode для любых дочерних элементов, которые можно отобразить.

interface CardProps {
  title: string;
  children: React.ReactNode;
}

function Card({ title, children }: CardProps) {
  return (
    <div className="card">
      <h2>{title}</h2>
      {children}
    </div>
  );
}

Типизация useState

useState обычно выводит тип из начального значения. Указывайте тип явно, если начальное значение равно null или не отражает весь возможный тип.

const [count, setCount] = useState(0);              // number
const [name, setName] = useState('');                // string

const [user, setUser] = useState<User | null>(null); // explicit
const [items, setItems] = useState<Item[]>([]);      // explicit array type

Типизация useRef

Есть две формы: ссылка на элемент DOM (изначально равна null) или изменяемый контейнер.

const inputRef = useRef<HTMLInputElement>(null);
const timerRef = useRef<number | null>(null);

useEffect(() => {
  inputRef.current?.focus();
  timerRef.current = window.setInterval(tick, 1000);
  return () => clearInterval(timerRef.current!);
}, []);

Типизация обработчиков событий

Используйте типы синтетических событий React.

function Form() {
  function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
  }
  function onChange(e: React.ChangeEvent<HTMLInputElement>) {
    setValue(e.target.value);
  }
  function onClick(e: React.MouseEvent<HTMLButtonElement>) {
    /* ... */
  }
  return <form onSubmit={onSubmit}>...</form>;
}

Обобщённые компоненты

Компоненты могут быть обобщёнными: TypeScript выводит параметр типа из места вызова.

interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
  keyOf: (item: T) => string | number;
}

function List<T>({ items, renderItem, keyOf }: ListProps<T>) {
  return <ul>{items.map(i => <li key={keyOf(i)}>{renderItem(i)}</li>)}</ul>;
}

<List<User>
  items={users}
  renderItem={u => u.name}
  keyOf={u => u.id}
/>

Типизация пользовательских хуков

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

function useToggle(initial = false): [boolean, () => void] {
  const [value, setValue] = useState(initial);
  const toggle = () => setValue(v => !v);
  return [value, toggle]; // tuple — annotation makes this stable
}

const [isOpen, toggle] = useToggle();

Типизация контекста

createContext требует начального значения того же типа, что и предоставляемое значение. Используйте утверждение ненулевого значения или объект по умолчанию.

interface AuthContextValue {
  user: User | null;
  signIn: (email: string, pw: string) => Promise<void>;
  signOut: () => void;
}

const AuthContext = createContext<AuthContextValue | null>(null);

export function useAuth() {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('useAuth must be inside AuthProvider');
  return ctx;
}

Типизация useReducer

Явно укажите тип состояния и объединение типов действий.

type State = { count: number };
type Action =
  | { type: 'increment' }
  | { type: 'decrement' }
  | { type: 'set'; value: number };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    case 'decrement': return { count: state.count - 1 };
    case 'set':       return { count: action.value };
  }
}

const [state, dispatch] = useReducer(reducer, { count: 0 });

Почему не стоит использовать React.FC

React.FC утратил популярность: он неявно добавляет дочерние элементы, плохо поддерживает обобщённые компоненты и мешает некоторым оптимизациям. Предпочитайте обычные функциональные компоненты с типизированными свойствами.

Утилита ComponentPropsWithoutRef

Чтобы унаследовать свойства нативного элемента (расширив кнопку или поле ввода), используйте ComponentPropsWithoutRef.

type ButtonProps = React.ComponentPropsWithoutRef<'button'> & {
  variant?: 'primary' | 'secondary';
};

function Button({ variant = 'primary', ...rest }: ButtonProps) {
  return <button className={`btn ${variant}`} {...rest} />;
}

Быстрая проверка

Почему использование React.FC обычно не рекомендуется по сравнению с обычными типизированными функциональными компонентами?

Итоги: TypeScript + React

Типизируйте свойства с помощью интерфейсов, предпочитайте обычные функции вместо React.FC. children: React.ReactNode. useState часто выводит тип самостоятельно; добавляйте аннотацию для null и пустых массивов. Используйте useRef для элементов DOM. Для обработчиков применяйте типы событий React. Используйте обобщённые компоненты для повторно используемых списков и форм. Возвращаемый кортеж пользовательских хуков требует аннотации. Применяйте ComponentPropsWithoutRef для расширения нативных элементов.

Часто задаваемые вопросы

Урок «TypeScript с React: обобщения FC и хуки» бесплатный?

Да — полный текст урока «TypeScript с React: обобщения FC и хуки» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «TypeScript с React: обобщения FC и хуки»?

Типизируйте компоненты React с обобщёнными свойствами, явно указывайте типы для useState и useRef и типизируйте пользовательские хуки, возвращающие кортежи Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «TypeScript с React: обобщения FC и хуки»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Типы шаблонных литералов
  2. Декораторы и метаданные
  3. TypeScript с React: обобщения FC и хуки
  4. Строгий режим и устранение any
← Назад к Frontend Academy