CODEWITHSUNDEEP
reactjstypescripttypesmouseevent
elderlyman
elderlyman

Reputation: 590

Annotate a function type to accept either a React.MouseEvent parameter or to remain anonymous

I am refactoring some code that shows a dialog to the user based on whether they have selected the 'edit' or 'delete' option in a dropdown.

As I work to make the dialog component more generic, I am trying to make the handleClose event handler be either of type () => void or of type (event: React.MouseEvent<HTMLElement>) => void.

In order to achieve this I have annotated the handleClose event handler so that it accepts both; it currently looks like this handleClose: () => void | ((event: React.MouseEvent<HTMLElement>) => void);.

Great - but I'm still getting a mysterious error message that is confusing me.

Error message:

Type '(event: React.MouseEvent<HTMLElement>) => void' is not assignable to type '() => void | ((event: MouseEvent<HTMLElement, MouseEvent>) => void)'.ts(2322)
FolderEditView.tsx(13, 5): The expected type comes from property 'handleClose' which is declared here on type 'IntrinsicAttributes & IProps'
(JSX attribute) IProps.handleClose: () => void | ((event: MouseEvent<HTMLElement, MouseEvent>) => void)

Where am I making a mistake in assigning two possible types? And why does the error message seem to indicate that in FolderEditView.tsx(13, 5) I am annotating without the use of React.MouseEvent...? The error message does not reflect the truth of what is written in my code, so it's hard to diagnose what's going on here.

Thanks

Upvotes: 1

Views: 1341

Answers (1)

NearHuscarl
NearHuscarl

Reputation: 81340

You probably want to do this based on the error message (add the second generic type parameter as suggested):

(event?: React.MouseEvent<HTMLElement, MouseEvent>) => void

event?: means the argument can be empty, you don't need to create a union of functions here

Live Demo

Upvotes: 1

Related Questions