Specifying onClick event type with Typescript and React.Konva

Actual event type depends on the HTML element class originating the event.

If it's <input type=button .. it will be event: React.MouseEvent<HTMLInputElement> If it's <button .. it will be event: React.MouseEvent<HTMLButtonElement> If it's some link, or anchor (Like Floating Action Buttons), it may be event: React.MouseEvent<HTMLAnchorElement>

However, these are all subclasses of HTMLElement

So in most cases if you don't care about specific subclass of event generating element, and just want to get .ownerDocument from it or some other generic attribute from base HTMLElement, you could get away with:

onClick={(event: React.MouseEvent<HTMLElement>) => {
  // say you are served inside the iframe and want to grab right 
  // parent document reference:
  (event.target as HTMLElement).ownerDocument || document).blah
}}

However, often you need value from specific HTMLElement subclass attribute, say .value from input element, then you pretty much have to specify that element class as T for MouseEvent:

onClick={(event: React.MouseEvent<HTMLInputElement>) => {
  // .value attribute exists only on HTMLInputElement,
  // not on parent class HTMLElement
  console.log('Input field value: ' + (event.target as HTMLInputElement).value)
}}

If its not clear what the HTMLElement subclass will actually be in the end (say you have 3rd party widget library) render it and see what it renders as input element / onClick event anchor or use sniffing suggestion from @Callum-Anderson below.

React.MouseEvent works for me:

private onClick = (e: React.MouseEvent<HTMLInputElement>) => {
  let button = e.target as HTMLInputElement;
}

You can do like this

   onClick: React.MouseEventHandler<HtmlInputElement> = (e) => {
     const button = e.target as HTML
}

I think the correct type is

event:React.MouseEvent<HTMLButtonElement, MouseEvent>

You should be using event.currentTarget. React is mirroring the difference between currentTarget (element the event is attached to) and target (the element the event is currently happening on). Since this is a mouse event, type-wise the two could be different, even if it doesn't make sense for a click.

https://github.com/facebook/react/issues/5733 https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

You can use IntelliSense (or equivalent) from your IDE/editor to determine the type. Temporarily place the event handler in-line with the HTML element then hover your cursor over the event. Eg.

<button onClick={(event => console.log(event))}>Click me</button>

Hovering over event in VSCode shows:

(parameter) event: React.MouseEvent<HTMLButtonElement, MouseEvent>

Taken from the ReactKonvaCore.d.ts file:

onClick?(evt: Konva.KonvaEventObject<MouseEvent>): void;

So, I'd say your event type is Konva.KonvaEventObject<MouseEvent>

I think you may try. It works on me.

const handleClick = (event: SyntheticEvent) => {
    const target = event.target 
};

<Button onClick={handleClick}>Click me</button>

const Example = () => {

      const handleSubmission = (event: React.MouseEvent<HTMLButtonElement>): void => {
          event.preventDefault()
          .....
      }

      return <button onClick={handleSubmission}>Submit</button>
}

So the solution is React.MouseEvent<HTMLButtonElement>

onClick={(event: Event) => {
    const { index } = event.target as unknown as { index: number }; 
    makeMove(ownMark, index);
}}

Also, for working with DOM you can use MouseEvent.
It will be correct for @typescript-eslint. Example:

const onClickEverywhere = (e: MouseEvent) => {
  e.preventDefault();
  e.stopPropagation();
  console.log(e.target);
};

useEffect(() => {
  document.body.addEventListener('click', onClickEverywhere);
  return document.body.removeEventListener('click', onClickEverywhere);
}, []);