vanilla js 和 typescript 事件引用

Question

I would like to ask if there is any way to annotate the type of the e parameter in this code:

const onDrag = () => {
    // Input element
    const range = document.querySelector('input') as HTMLInputElement;

    // Paragrahp element
    const rangeValue = document.querySelector('#used-data') as HTMLElement;

  // THIS ONE HERE
    range.addEventListener('change', (e) => {
        rangeValue.textContent = `${e} GB`;
    });
};

onDrag();

Btw, the range variable is a range input element. The inferred annotation of e is an event and it seems that I cant access the value using e.target.value . Aside from assigning the type of e as any or by using function() this.value , is there another way to do this?

Answer 1

Typescript has a pretty good and straight forward online documentation which could be found here .

In general, types are annotates by passing a colon and the variable type afterwards. The events "change" and "input" are both typed as InputEvent . Your code will look like the following:

    range.addEventListener('change', (e: InputEvent) => {
        rangeValue.textContent = `${e.data} GB`;
    });