which values are available in event.target and how to access it

Question

i am following an online workshop and examples which you can find it here :

https://openlayers.org/en/latest/examples/mouse-position.html

in the example posted in the above mentioned link, in both of the functions

var projectionSelect = document.getElementById('projection');
projectionSelect.addEventListener('change', function (event) {
  mousePositionControl.setProjection(event.target.value);//<------HERE
});

And

var precisionInput = document.getElementById('precision');
precisionInput.addEventListener('change', function (event) {
  var format = createStringXY(event.target.valueAsNumber);//<------HERE
  mousePositionControl.setCoordinateFormat(format);
});

the following attributes were used respectively

 event.target.value , event.target.valueAsNumber
 

however, when i tried to run the code in visual studio codes, it underscores both of

 .value  and .valueAsNumber 
 

with red, which mean such attriburtes do not exist. please let me know which attributes are valid to be used so i can have access to the values contained in

 event.target
 

code:

ngOnInit(){
    this.todaydate2 = this.myservice.showTodayDate();
    this.value = this.myservice.observablesTest();

    var mousePositionControl = new MousePosition({
      className: 'custom-mouse-position',
      coordinateFormat: createStringXY(7),
      projection: 'EPSG:4326',
      // comment the following two lines to have the mouse position
      // be placed within the map.
      target: document.getElementById('mouse-position'),
      undefinedHTML: '',//for what to be rendered when the mouse leaves map scope: values https://openlayers.org/en/latest/apidoc/module-ol_control_MousePosition-MousePosition.html
    });

    this.map = new Map({
      controls: defaultControls().extend([mousePositionControl]),
      target: 'map-container',
      layers: [
        new TileLayer({
          source: new XYZSource({
            url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
          })
        })
      ],
      view: new View({
        center: fromLonLat([13.2232,52.4059]),
        zoom: 6
      })
    });

    var projectionSelect = document.getElementById('projection');
    projectionSelect.addEventListener('change', function (event) {
      mousePositionControl.setProjection(event.target);
    });

    var precisionInput = document.getElementById('precision');
    precisionInput.addEventListener('change', function (event) {
    var format = createStringXY(event.target);
    mousePositionControl.setCoordinateFormat(format);
    });
}

Answer 1

i solved this problem via type casting as follows:

mousePositionControl.setProjection((event.target as HTMLInputElement).value);
var format = createStringXY((event.target as HTMLInputElement).value);