“元素”类型上不存在属性“值”

Question

I am creating image filters using Angular but I am getting below error.

image = document.querySelector('img');
filterControl = document.querySelectorAll('input[type=range]');

applyfilter(){
let computedFilters ='';
this.filterControl.forEach(function(item,index) {
  computedFilters += item.getAttribute('data-filter') + '(' + item.value + item.getAttribute('data-scale') + ')';
});
this.image.style.filter = computedFilters;
}

Error:

item.value (Property 'value' does not exist on type 'Element'.ts(2339))

This is my HTML

    <input id="sepia" type="range" onchange="applyFilter()" [(ngModel)]="sepia"  data-filter="sepia" data-scale="%" step="0.1" min="0" max="1"> Sepia
                <span id="Amount_sepia">({{sepia}})</span><br/>

Why am I getting this error?

Answer 1

Element type is general for all html element (not only inputs) and yes - there are no value property in that type. In order to enjoy using TypeScript, we need to understand that sometimes casting an object to a specific type IS A MUST . in our use-case the type is HTMLInputElement which represens inputs (which got value property). So:

this.filterControl.forEach(function(item: HtmlInputElement, index: number) {
  if (!item) return; // maybe there are other elements which are not inputs like div, span, etc.
  computedFilters += item.getAttribute('data-filter') + '(' + item.value + 
  item.getAttribute('data-scale') + ')';
});