React component props with hyphen naming

Question

I have a component Button in react with below interface

interface ButtonI extends React.HTMLAttributes<HTMLButtonElement> {
  background?: string;
  border?: string;
  children?: React.ReactElement;
  className?: string;
  color?: string;
  disabled?: boolean;
  onClick?: (evt: any) => void;
  size?: 'small' | 'medium' | 'large' ;
}

I want to pass data-test as a prop, but I get error from typescript if I define data-test in interface as

data-test?:string;

Can someone tell me how can I pass props in react with hyphen in names?

Answer 1

I found the solution as below:
In the interface I used single quotes

'data-test'?: string;

and while destructuring I aliased it as

const {
      background,
      border,
      children,
      className,
      color,
      disabled,
      onClick,
      size,
      'data-test':dataTest
    } = props;