Typescript: button element type attribute-CodePudding

I would like a custom button to optionally receive type attribute:

export interface ButtonProps {
  children: React.ReactNode;
  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
  type: ??
}


export const Button: React.FunctionComponent<ButtonProps> = ({ children, ...buttonProps }) => {
  return <StyledButton {...buttonProps}>{children}</StyledButton>;
};

export default Button;

Same as with 'onClick' which is working. Any type I'm trying to fill in, it still throws an error. What is the correct type for the type attribute?

CodePudding user response：

You can write a button in your editor:

<button type='' />

and probably ctrl/command click on the type, or hover on the type attribute see its type.

    interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {
        autoFocus?: boolean | undefined;
        disabled?: boolean | undefined;
        form?: string | undefined;
        formAction?: string | undefined;
        formEncType?: string | undefined;
        formMethod?: string | undefined;
        formNoValidate?: boolean | undefined;
        formTarget?: string | undefined;
        name?: string | undefined;
        type?: 'submit' | 'reset' | 'button' | undefined;
        value?: string | ReadonlyArray<string> | number | undefined;
    }

Also you can extend the props of your component:

export interface ButtonProps extends React.HTMLProps<HTMLButtonElement> {}

You may want to overwrite or omit the types you want.