Типизация пропсов
Типы пропсов должны быть простыми и читаться с первого взгляда.
Лучший базовый вариант: объявить Props рядом с компонентом и использовать этот тип в сигнатуре.
Так проще поддерживать API компонента: все ограничения и допущения видны рядом с реализацией.
...
type ButtonVariant = "primary" | "secondary";
interface ButtonProps extends ComponentProps<"button"> {
children: ReactNode;
variant?: ButtonVariant;
...
}
const Button = ({ variant = "primary", children, ...props }: ButtonProps) => (
...
Что важно:
- держите типы рядом с компонентом;
- не усложняйте интерфейс лишними generic'ами без необходимости;
Если в компоненте появляются вариации (variant, size, state), лучше сначала выделить простые union-типы.
Это делает типизацию более явной и снижает риск невалидных комбинаций пропсов.