Event target doesn't exist on the lib dom interface in typescript defintion

by

I’m building out a simple color picker for a front end using typescript. I’m adding an event listener to the color picker input:

The html:

<input id="color-picker" type="color" value="" />

The typescript:

private grabUiElements() {
  this.colorPicker = document.querySelector("#color-picker")
}

private addListners() {
  this.colorPicker?.addEventListener("change", this.updateBrickColor.bind(this))
}

 private updateBrickColor(changeEvent: Event) {
    let hexColor = changeEvent?.target?.value // ! here's where the problem is

    const red = hexColor & 0xFF
    color >>= 8
    const green = hexColor & 0xFF
    color >>= 8
    const blue = hexColor & 0xFF

    doOtherStuff(red,green,blue)
  }

The problem I’m running into is that the typescript compiler is telling me that the event target doesn’t have a value property, but it definitely does have it:

value def exists

I double checked the input change event docs on MDN and they definitely have an example of just this:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event#text_input_element

docs

And I’m definitely using the dom Event interface:

dom event interface

So I’m not sure why I’m getting the error. I know I can use an any for the parameter type, but I’d prefer to know what I’m doing wrong.

13 thoughts on “Event target doesn't exist on the lib dom interface in typescript defintion”

Leave a Comment