jb

Типизация пропсов

Типы пропсов должны быть простыми и читаться с первого взгляда. Лучший базовый вариант: объявить 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-типы. Это делает типизацию более явной и снижает риск невалидных комбинаций пропсов.

Редактировать на GitHub