Typescript：属性“数据”在HTMLElement类型上不存在

Question

I try to get all elemets which have a class name in typescript and need to check something on data property of each element, this is what I came so far :

let getTopElements :NodeListOf<HTMLElement>  = document.querySelectorAll('.timeline-row');
var newArr: HTMLElement[] = Array.prototype.slice.call(getTopElements);

if (getTopElements){
  for (let element of newArr){
    if (element.data('options') && element.data('options').type === 'TOP')   {
       this.player.currentTime(element.data('options').end).pause();
     }
   }
 }

But in my if condition line, I get this error on data Property 'data' dose not exist on type HTMLElement

Am i doing this wrong?

Answer 1

Because data() is a method from jQuery to get data attributes. You should use the dataset property to modify and read data attributes. Also keep in mind that you can only store string values in a data attribute:

 const data = element.dataset;
 data.optionsType = 'TOP';
 if (data.optionsType === 'TOP')   {
   this.player.currentTime(data.optionsEnd).pause();
 }

Another option would be to use getAttribute('data-*') to get the value or setAttribute('data-*', value) to set the value.

You could have a look at the MDN page for a tutorial how to properly use data attributes.