Openlayers 3 select interaction unable to add event condition

Question

So I'm trying to add a select interaction into my maps when I hover over any feature it's clearly highlighted.

import Select from 'ol/interaction/select';
import pointerMove from 'ol/events/condition.js'

this.selectPointerMove = new Select({
   condition: pointerMove
});
this.coreMapComponent.map.addInteraction(this.selectPointerMove);

The condition field is throwing an error of -

 Type 'typeof events' is not assignable to type 'EventsConditionType'.
 Type 'typeof events' provides no match for the signature '(event: MapBrowserEvent): boolean'.

Without a condition it works fine on a mouse click.

Should mention this in an Angular 6 project using the "@types/ol": "^4.6.2", if that's of any relevance.

Answer 1

The current Openlayers version 5.x.x needs some typing updates. Since even you are using the Openlayers 5.x.x the types installed are from version 4.x.x.

This means that you need some workaround in on your code.

Since all typings on version 4.x.x are using DefaultExports method, you can't use NamedExports like:

import {pointerMove} from 'ol/events/condition';

Solution:

One option you can do is import all as a variable. With this, you will escape the TS error:

import Select from 'ol/interaction/select';
import * as condition from 'ol/events/condition';

this.selectPointerMove = new Select({
   condition: (condition as any).pointerMove
});
this.coreMapComponent.map.addInteraction(this.selectPointerMove);

One side effect of that is that you will remove the option to do tree-shacking, but well, you will survive without that.

Hope this helps!