Use generics to limit event types in on(), once() and un()

src/ol/Collection.js

@@ -59,7 +59,7 @@ export class CollectionEvent extends Event {
  * Collection as a whole.
  *
  * @fires CollectionEvent
- *
+ * @extends BaseObject<'add'|'remove'|'change:length'>
  * @template T
  * @api
  */

src/ol/Feature.js

@@ -58,6 +58,7 @@ import {listen, unlistenByKey} from './events.js';
  *
  * @api
  * @template {import("./geom/Geometry.js").default} Geometry
+ * @extends BaseObject<'change:geometry'>
  */
 class Feature extends BaseObject {
   /**

src/ol/Geolocation.js

@@ -82,6 +82,7 @@ class GeolocationError extends BaseEvent {
  *     });
  *
  * @fires module:ol/events/Event~BaseEvent#event:error
+ * @extends BaseObject<'change:accuracy'|'change:accuracyGeometry'|'change:altitude'|'change:altitudeAccuracy'|'change:heading'|'change:position'|'change:projection'|'change:speed'|'change:tracking'|'change:trackingOptions'>
  * @api
  */
 class Geolocation extends BaseObject {

src/ol/Object.js

@@ -78,6 +78,8 @@ export class ObjectEvent extends Event {
  * object.unset('foo').
  *
  * @fires ObjectEvent
+ * @template {string} EventTypes
+ * @extends Observable<'propertychange'|EventTypes>
  * @api
  */
 class BaseObject extends Observable {

src/ol/Observable.js

@@ -5,6 +5,11 @@ import EventTarget from './events/Target.js';
 import EventType from './events/EventType.js';
 import {listen, listenOnce, unlistenByKey} from './events.js';
 
+/**
+ * @template ChildTypes
+ * @typedef {ChildTypes|'change'|'error'|Array<ChildTypes|'change'|'error'>} EventTypes
+ */
+
 /**
  * @classdesc
  * Abstract base class; normally only used for creating subclasses and not
@@ -14,6 +19,7 @@ import {listen, listenOnce, unlistenByKey} from './events.js';
  * {@link module:ol/Observable~Observable#changed}.
  *
  * @fires import("./events/Event.js").default
+ * @template {string} ChildTypes
  * @api
  */
 class Observable extends EventTarget {
@@ -48,7 +54,7 @@ class Observable extends EventTarget {
 
   /**
    * Listen for a certain type of event.
-   * @param {string|Array<string>} type The event type or array of event types.
+   * @param {EventTypes<ChildTypes>} type The event type or array of event types.
    * @param {function(?): ?} listener The listener function.
    * @return {import("./events.js").EventsKey|Array<import("./events.js").EventsKey>} Unique key for the listener. If
    *     called with an array of event types as the first argument, the return
@@ -70,7 +76,7 @@ class Observable extends EventTarget {
 
   /**
    * Listen once for a certain type of event.
-   * @param {string|Array<string>} type The event type or array of event types.
+   * @param {EventTypes<ChildTypes>} type The event type or array of event types.
    * @param {function(?): ?} listener The listener function.
    * @return {import("./events.js").EventsKey|Array<import("./events.js").EventsKey>} Unique key for the listener. If
    *     called with an array of event types as the first argument, the return
@@ -94,7 +100,7 @@ class Observable extends EventTarget {
 
   /**
    * Unlisten for a certain type of event.
-   * @param {string|Array<string>} type The event type or array of event types.
+   * @param {EventTypes<ChildTypes>} type The event type or array of event types.
    * @param {function(?): ?} listener The listener function.
    * @api
    */

src/ol/Overlay.js

@@ -101,6 +101,7 @@ const Property = {
  *     popup.setPosition(coordinate);
  *     map.addOverlay(popup);
  *
+ * @extends BaseObject<'change:element'|'change:map'|'change:offset'|'change:position'|'change:positioning'>
  * @api
  */
 class Overlay extends BaseObject {

src/ol/PluggableMap.js

@@ -132,6 +132,7 @@ import {removeNode} from './dom.js';
  * @fires import("./render/Event.js").default#precompose
  * @fires import("./render/Event.js").default#postcompose
  * @fires import("./render/Event.js").default#rendercomplete
+ * @extends BaseObject<'change:layergroup'|'change:size'|'change:target'|'change:view'|'precompose'|'singleclick'|'click'|'dblclick'|'pointerdrag'|'pointermove'|'postrender'|'movestart'|'moveend'|'postcompose'|'rendercomplete'>
  * @api
  */
 class PluggableMap extends BaseObject {

src/ol/View.js

@@ -288,6 +288,7 @@ const DEFAULT_MIN_ZOOM = 0;
  * the snap angle is 0), an animation will be triggered at the interaction end to
  * put back the view to a stable state;
  *
+ * @extends BaseObject<'change:center'|'change:resolution'|'change:rotation'>
  * @api
  */
 class View extends BaseObject {

src/ol/control/Control.js

@@ -41,6 +41,8 @@ import {removeNode} from '../dom.js';
  * You can also extend this base for your own control class. See
  * examples/custom-controls for an example of how to do this.
  *
+ * @template {string} EventTypes
+ * @extends BaseObject<EventTypes>
  * @api
  */
 class Control extends BaseObject {

src/ol/control/FullScreen.js

@@ -66,6 +66,7 @@ const FullScreenEventType = {
  *
  * @fires FullScreenEventType#enterfullscreen
  * @fires FullScreenEventType#leavefullscreen
+ * @extends Control<'enterfullscreen'|'leavefullscreen'>
  * @api
  */
 class FullScreen extends Control {

src/ol/control/MousePosition.js

@@ -50,6 +50,7 @@ const COORDINATE_FORMAT = 'coordinateFormat';
  * On touch devices, which usually do not have a mouse cursor, the coordinates
  * of the currently touched position are shown.
  *
+ * @extends Control<'change:coordinaetFormat'|'change:projection'>
  * @api
  */
 class MousePosition extends Control {

src/ol/control/ScaleLine.js

@@ -69,6 +69,7 @@ const DEFAULT_DPI = 25.4 / 0.28;
  * When specifying `bar` as `true`, a scalebar will be rendered instead
  * of a scaleline.
  *
+ * @extends Control<'change:units'>
  * @api
  */
 class ScaleLine extends Control {

src/ol/interaction/DragAndDrop.js

@@ -82,6 +82,7 @@ export class DragAndDropEvent extends Event {
  * combinnation of formats read both text string and ArrayBuffer sources. Older browsers such
  * as IE which do not support this will need a TextDecoder polyfill to be loaded before use.
  *
+ * @extends Interaction<'addfeatures'>
  * @api
  *
  * @fires DragAndDropEvent

src/ol/interaction/DragBox.js

@@ -103,6 +103,7 @@ export class DragBoxEvent extends Event {
  * {@link module:ol/interaction/DragRotateAndZoom}).
  *
  * @fires DragBoxEvent
+ * @extends PointerInteraction<'boxcancel'|'boxdrag'|'boxend'>
  * @api
  */
 class DragBox extends PointerInteraction {

src/ol/interaction/Draw.js

@@ -178,6 +178,7 @@ export class DrawEvent extends Event {
  * Interaction for drawing feature geometries.
  *
  * @fires DrawEvent
+ * @extends PointerInteraction<'drawabort'|'drawend'|'drawstart'>
  * @api
  */
 class Draw extends PointerInteraction {

src/ol/interaction/Extent.js

@@ -81,6 +81,7 @@ export class ExtentEvent extends Event {
  * This interaction is only supported for mouse devices.
  *
  * @fires ExtentEvent
+ * @extends PointerInteraction<'extentchanged'>
  * @api
  */
 class Extent extends PointerInteraction {

src/ol/interaction/Interaction.js

@@ -27,6 +27,9 @@ import {easeOut, linear} from '../easing.js';
  * by a keyboard event not a button element event.
  * Although interactions do not have a DOM element, some of them do render
  * vectors and so are visible on the screen.
+ *
+ * @template {string} EventTypes
+ * @extends BaseObject<EventTypes|'change:active'>
  * @api
  */
 class Interaction extends BaseObject {

src/ol/interaction/Modify.js

@@ -183,6 +183,7 @@ export class ModifyEvent extends Event {
  * key is pressed.  To configure the interaction with a different condition
  * for deletion, use the `deleteCondition` option.
  * @fires ModifyEvent
+ * @extends PointerInteraction<'modifyend'|'modifystart'>
  * @api
  */
 class Modify extends PointerInteraction {

src/ol/interaction/Pointer.js

@@ -41,6 +41,9 @@ import {getValues} from '../obj.js';
  * started. During a drag sequence the `handleDragEvent` user function is
  * called on `move` events. The drag sequence ends when the `handleUpEvent`
  * user function is called and returns `false`.
+ *
+ * @template {string} EventTypes
+ * @extends Interaction<EventTypes>
  * @api
  */
 class PointerInteraction extends Interaction {

src/ol/interaction/Select.js

@@ -147,6 +147,7 @@ const originalFeatureStyles = {};
  * Selected features are added to an internal unmanaged layer.
  *
  * @fires SelectEvent
+ * @extends Interaction<'select'>
  * @api
  */
 class Select extends Interaction {

src/ol/interaction/Translate.js

@@ -116,6 +116,7 @@ export class TranslateEvent extends Event {
  * Interaction for translating (moving) features.
  *
  * @fires TranslateEvent
+ * @extends PointerInteraction<'translateend'|'translatestart'|'translating'>
  * @api
  */
 class Translate extends PointerInteraction {

src/ol/layer/Base.js

@@ -38,6 +38,8 @@ import {clamp} from '../math.js';
  * the options is set as a {@link module:ol/Object} property on the layer object, so
  * is observable, and has get/set accessors.
  *
+ * @template {string} EventTypes
+ * @extends BaseObject<EventTypes|'change:extent'|'change:maxResolution'|'change:maxZoom'|'change:minResolution'|'change:minZoom'|'change:opacity'|'change:visible'|'change:zIndex'>
  * @api
  */
 class BaseLayer extends BaseObject {

src/ol/layer/BaseTile.js

@@ -45,7 +45,7 @@ import {assign} from '../obj.js';
  * options means that `title` is observable, and has get/set accessors.
  *
  * @template {import("../source/Tile.js").default} TileSourceType
- * @extends {Layer<TileSourceType>}
+ * @extends Layer<TileSourceType,'preload'|'useInterimTilesOnError'>
  * @api
  */
 class BaseTileLayer extends Layer {

src/ol/layer/BaseVector.js

@@ -73,7 +73,8 @@ const Property = {
  * options means that `title` is observable, and has get/set accessors.
  *
  * @template {import("../source/Vector.js").default|import("../source/VectorTile.js").default} VectorSourceType
- * @extends {Layer<VectorSourceType>}
+ * @template {string} EventTypes
+ * @extends Layer<VectorSourceType,EventTypes>
  * @api
  */
 class BaseVectorLayer extends Layer {

src/ol/layer/Layer.js

@@ -85,6 +85,8 @@ import {listen, unlistenByKey} from '../events.js';
  * @fires import("../render/Event.js").RenderEvent#postrender
  *
  * @template {import("../source/Source.js").default} SourceType
+ * @template {string} EventTypes
+ * @extends BaseLayer<EventTypes|'postrender'|'prerender'>
  * @api
  */
 class Layer extends BaseLayer {

src/ol/layer/VectorTile.js

@@ -74,7 +74,7 @@ import {assign} from '../obj.js';
  * options means that `title` is observable, and has get/set accessors.
  *
  * @param {Options} [opt_options] Options.
- * @extends {BaseVectorLayer<import("../source/VectorTile.js").default>}
+ * @extends BaseVectorLayer<import("../source/VectorTile.js").default,'change:preload'|'change:useInterimTilesOnError'>
  * @api
  */
 class VectorTileLayer extends BaseVectorLayer {

src/ol/source/Image.js

@@ -76,6 +76,7 @@ export class ImageSourceEvent extends Event {
  * Base class for sources providing a single image.
  * @abstract
  * @fires module:ol/source/Image.ImageSourceEvent
+ * @extends Source<'imageloadend'|'imageloaderror'|'imageloadstart'>
  * @api
  */
 class ImageSource extends Source {

src/ol/source/Source.js

@@ -40,6 +40,8 @@ import {get as getProjection} from '../proj.js';
  * Base class for {@link module:ol/layer/Layer~Layer} sources.
  *
  * A generic `change` event is triggered when the state of the source changes.
+ * @template {string} EventTypes
+ * @extends BaseObject<EventTypes>
  * @abstract
  * @api
  */

src/ol/source/Tile.js

@@ -36,6 +36,8 @@ import {scale as scaleSize, toSize} from '../size.js';
  * Abstract base class; normally only used for creating subclasses and not
  * instantiated in apps.
  * Base class for sources providing images divided into a tile grid.
+ * @template {string} EventTypes
+ * @extends Source<EventTypes>
  * @abstract
  * @api
  */

src/ol/source/UrlTile.js

@@ -33,6 +33,7 @@ import {getUid} from '../util.js';
  * Base class for sources providing tiles divided into a tile grid over http.
  *
  * @fires import("./Tile.js").TileSourceEvent
+ * @extends TileSource<'tileloadend'|'tileloaderror'|'tileloadstart'>
  */
 class UrlTile extends TileSource {
   /**