error TS: Property 'dataset' does not exists on type 'Element'

Question

I'm getting this error in terminal, in the process of compilation in a angular8 environment. On the localhost I navigate the page without any problems and without any errors in console. I made a console.log of the variable that has assigned that dataset property, and it is read correctly. Below there's the interested code part:

      let timelineEls = document.querySelectorAll('[data-scroll-timeline]');
  scroll.on("scroll", () => {
    for ( let i = 0; i < timelineEls.length; i++ ) {
      let progress = self.getProgress(timelineEls[i]);
      let timelineKey = timelineEls[i].dataset.scrollTimeline;

      console.log(timelineEls[i].dataset);

      let timeline = timelines[timelineKey]._recent;
      let timeline = timelines[timelineKey];
      let duration = timeline.duration();
      if ( progress > 0 && progress <= 1 ) {
        timeline.seek(progress * duration);
      } else {
        if ( progress <= 0 ) {
          timelines[timelineKey].seek(0);
        } else {
          timelines[timelineKey].seek(duration);
        }
      }
    }
  })

console.log stamps correctly this: DOMStringMap {scroll: "", scrollTimeline: "albed-anim"}

Do you have any idea of how to get rid of this error? I guess it's a typescript error but i couldn't find any reasons while it shows and how to avoid it.

Thank you in advance.

Answer 1

The property dataset does not exist on type Element, but does exist on HTMLElement. You need to make sure it's of this type before proceeding. It also works to adjust your for loop a bit:

for (const timelineEl of timelineEls) {
  if (timelineEl instanceof HTMLElement) {
    const progress = self.getProgress(timelineEl);
    const timelineKey = timelineEl.dataset.scrollTimeline;
    // ...
  }
}