Explicitly declared property doesn't exist, typescript-CodePudding

I have a simple component, but for some reason a property that has been explicitly defined doesn't exist on that same component. I've tried changing the name to something else with no luck.

enum ButtonSize {
  large = "large",
  medium = "medium",
  small = "small",
}
function Button({
  className,
  children,
  color,
  size, // <= Error
  ...props
}: DetailedHTMLProps<
  ButtonHTMLAttributes<HTMLButtonElement>,
  HTMLButtonElement & { size: ButtonSize } & ColorScheme

>)

It outputs:

Property 'size' does not exist on type 'ClassAttributes<HTMLButtonElement & { size: ButtonSize; } & ColorScheme> & ButtonHTMLAttributes'.

CodePudding user response：

You're doing the &'s in the wrong place. They should be after DetailedHTMLProps, not inside it:

DetailedHTMLProps<
  ButtonHTMLAttributes<HTMLButtonElement>,
  HTMLButtonElement
> & { size: ButtonSize } & ColorScheme