如何处理 TS React 项目中的意外道具？

Question

For example, I have a custom button component.

<button type={type} className={classes} {...props}>
  {!!children && <span>{children}</span>}
</button>

I passed other props that I don't want to predict with destructing. But TS will throw an error when I will try to pass, for example, disabled prop coz it not defined in the TS interface.

Is there some way to deal with this? Or the only way is to define all possible pros in an interface?

Answer 1

For your specific case, your custom button props could extend HTML button props

interface MyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children: React.ReactNode;
}

function MyButton({ children, ...props }: MyButtonProps) {
  return <button {...props}>{children}</props>
}