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

Пропсы описывают interface или type, а компонент остаётся обычной функцией.

import type { ReactNode } from 'react';

interface ButtonProps {
  variant?: 'primary' | 'ghost';
  disabled?: boolean;
  onClick: () => void;
  children: ReactNode;
}

export function Button({ variant = 'primary', onClick, children, disabled }: ButtonProps) {
  return (
    <button className={variant} onClick={onClick} disabled={disabled}>
      {children}
    </button>
  );
}

children

• ReactNode — любой допустимый вложенный контент (текст, элементы, массивы, null).
• ReactElement — только JSX-элемент.
• Функция в children (render prop): (value: T) => ReactNode.

Расширение нативных пропсов

type InputProps = React.ComponentPropsWithoutRef<'input'> & { label: string };

Так компонент принимает все атрибуты <input> без ручного перечисления.

Практика

• Не используйте React.FC только ради children: в React 18 он перестал добавлять их автоматически.
• Дефолты задавайте через деструктуризацию.
• Для объединений пропсов применяйте дискриминируемые типы, чтобы нельзя было передать несовместимые комбинации.

Коротко для собеседования

Пропсы описывают через interface или type, детей типизируют как ReactNode. Для несовместимых комбинаций пропсов используйте дискриминируемые объединения.