Typescript, how to handle spread operators inside interface

Question

I currently have a react component that looks like this - notice the spread operator which operates on ...other and is passed on further down the component.

interface ButtonProps {
  colourMode: string;
  regular: boolean;
  buttonText: string;
  disabled?: boolean;
  iconSize?: string;
  iconLeft?: React.ReactNode;
  iconRight?: React.ReactNode;
}

const LowProButton = (props: ButtonProps) => {
  const {
    colourMode,
    buttonText,
    disabled,
    iconSize,
    iconLeft,
    iconRight,
    ...other
  } = props;

When I try to pass any additional parameter to this button i.e: the onClick in the consumer, it complains that the props are not assignable to type 'IntrinsicAttributes & ButtonProps' - how do I fix the interface to allow any prop to be passed safely through whilst keeping the strongly typed elements within the interface? To be clear, I want to pass any prop I want to the component, i.e. the onClick or anything else I wish, whilst keeping the colourMode: string etc.

<LowProButton
        iconSize="14"
        regular={false}
        iconLeft={<RestartAltIcon />}
        colourMode="secondary"
        buttonText="Detailed"
        onClick={props.performClick}
      ></LowProButton>

leo · Accepted Answer · 2022-11-22 15:12:55Z

1

What exactly do you want to achieve with other? If you want to have all the usual html button properties you then need to extend your interface to allow it so something like

interface ButtonProps extends HTMLButtonElement {
  colourMode: string;
  regular: boolean;
  buttonText: string;
  disabled?: boolean;
  iconSize?: string;
  iconLeft?: React.ReactNode;
  iconRight?: React.ReactNode;
}

answered Nov 22, 2022 at 15:12

leo

1114 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Typescript, how to handle spread operators inside interface

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related