Typescript types for onInput, onBlur etc..

I am trying to pass an Event Handler to onInput and onBlur but it is complaining about my types for the function itself. The code works, but I cannot find the correct type.

My event handler is:

public onInput = ({target}: {target: HTMLInputElement}) => {
    const {value, name, validity} = target;
    this.setInputValue(name, value);
    this.setInputValidity(name, validity);
    this.setInputs();
};

While Typescript expects:

Type '({ target }: { target: HTMLInputElement; }) => void' is not assignable to type 'GenericEventHandler<HTMLInputElement>'.
  Types of parameters '__0' and 'event' are incompatible.
    Type 'TargetedEvent<HTMLInputElement, Event>' is not assignable to type '{ target: HTMLInputElement; }'.
      Types of property 'target' are incompatible.
        Type 'EventTarget | null' is not assignable to type 'HTMLInputElement'.
          Type 'null' is not assignable to type 'HTMLInputElement'.ts(2322)

I am passing it like this:

<input onInput={this.onInput} />

I’ve obviously tried to set it to GenericEventHandler<HTMLInputElement> but that does not work, since I need the event passed to the function.

I am sure that I’m doing something completely wrong, but I am not sure what. I can see that in React they have SyntheticEvent which helps with this.

[38elements]

This works.

import { h, render, Component, JSX } from 'preact'


class Foo extends Component {
  onInput({currentTarget}: JSX.TargetedEvent<HTMLInputElement, Event>) {
    console.log(currentTarget.value)
  }
  render() {
    return <input onInput={this.onInput} />
  }
}

render(<Foo />, document.body)

[drackp2m]

I currently do something like the following:

import { h, render, Component } from 'preact';

class Foo extends Component {
  onInput(e: Event) {
    if (e.target instanceof HTMLInputElement) {
      console.log(e.target.value);
    }
  }

  render() {
    return h('input', { onInput: this.onInput });
  }
}

render(<Foo />, document.body);

As explained in this section of the documentation: https://preactjs.com/guide/v10/typescript#typing-events