diff --git a/README.md b/README.md
index 45d7e9ae72..c92d107461 100644
--- a/README.md
+++ b/README.md
@@ -105,18 +105,7 @@ The untranspiled sources in the `src/` folder are JSDoc type annotated. For appl
 
 ## TypeScript support
 
-When authoring in TypeScript, we recommend you try out the types that are included in the `ol` package. To use these types, make sure you have the following entry for `@types/ol` in your `package.json`'s `devDependencies` section:
-```
-{
-  ...
-  "devDependencies": {
-    ...
-    "@types/ol": "file:node_modules/ol/types",
-    ...
-  }
-}
-```
-These are auto-generated with the TypeScript compiler, and will be the default in future versions. Alternatively, you can use third-party types from [Definitely Typed](https://definitelytyped.org) (`npm install @types/ol`) or from [hanreev/types-ol](https://github.com/hanreev/types-ol).
+The [ol package](https://npmjs.com/package/ol) includes auto-generated TypeScript declarations as `*.d.ts` files.
 
 ## Supported Browsers
 
diff --git a/changelog/upgrade-notes.md b/changelog/upgrade-notes.md
index d6b37c7815..cb4a84af8d 100644
--- a/changelog/upgrade-notes.md
+++ b/changelog/upgrade-notes.md
@@ -2,6 +2,19 @@
 
 ### Next version
 
+#### Included TypeScript declarations
+
+The [ol package](https://npmjs.com/package/ol) now includes TypeScript declarations as `*.d.ts` files.
+
+If desired, e.g. when you don't want to adjust your code after upgrading from a previous version where you used `@types/ol`, you can opt out of the included types and use third-party types by specifying aliases in the `compilerOptions` section of `tsconfig.json`, e.g.
+```json
+    "baseUrl": "./",
+    "paths": {
+      "ol": ["node_modules/@types/ol"],
+      "ol/*": ["node_modules/@types/ol/*"]
+    },
+```
+
 #### Deprecation of `image` render mode for vector tile layers
 
 `renderMode: 'image'` for vector tile layers has been deprecated. Applications continue to work, but a warning will be issued to the console. To get rid of the warning, simply remove the `renderMode` option.
diff --git a/package-lock.json b/package-lock.json
index c7ae922bb1..9a0aae8bc2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -68,7 +68,6 @@
         "shx": "^0.3.2",
         "sinon": "^11.1.1",
         "terser-webpack-plugin": "^5.1.1",
-        "typescript": "^4.2.4",
         "url-polyfill": "^1.1.5",
         "walk": "^2.3.9",
         "webpack": "^5.27.2",
@@ -10376,19 +10375,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/typescript": {
-      "version": "4.3.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.5.tgz",
-      "integrity": "sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==",
-      "dev": true,
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=4.2.0"
-      }
-    },
     "node_modules/ua-parser-js": {
       "version": "0.7.28",
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.28.tgz",
@@ -19235,12 +19221,6 @@
         "mime-types": "~2.1.24"
       }
     },
-    "typescript": {
-      "version": "4.3.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.5.tgz",
-      "integrity": "sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==",
-      "dev": true
-    },
     "ua-parser-js": {
       "version": "0.7.28",
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.28.tgz",
diff --git a/package.json b/package.json
index 9836ac7595..1fcf3e4b62 100644
--- a/package.json
+++ b/package.json
@@ -25,9 +25,9 @@
     "build-legacy": "shx rm -rf build/legacy && npm run build-index && webpack --config config/webpack-config-legacy-build.js && cleancss --source-map src/ol/ol.css -o build/legacy/ol.css",
     "build-site": "npm run build-examples && npm run apidoc && mkdir -p build/site && cp site/index.html build/site && mv build/apidoc build/site/apidoc && mv build/examples build/site/examples",
     "copy-css": "shx cp src/ol/ol.css build/ol/ol.css",
-    "generate-types": "tsc --project config/tsconfig-build.json --declaration --declarationMap --emitDeclarationOnly --outdir build/ol/types",
-    "transpile": "shx rm -rf build/ol && shx mkdir -p build/ol && shx cp -rf src/ol build/ol/src && node tasks/serialize-workers.cjs && tsc --project config/tsconfig-build.json",
-    "typecheck": "tsc --pretty",
+    "generate-types": "npx --package=typescript@3.8.3 -y -- tsc --project config/tsconfig-build.json --declaration --declarationMap --emitDeclarationOnly --outdir build/ol",
+    "transpile": "shx rm -rf build/ol && shx mkdir -p build/ol && shx cp -rf src/ol build/ol/src && node tasks/serialize-workers.cjs && npx --package=typescript@4.3.5 -y -- tsc --project config/tsconfig-build.json",
+    "typecheck": "npx --package=typescript@4.3.5 -y -- tsc --pretty",
     "apidoc-debug": "shx rm -rf build/apidoc && node --inspect-brk=9229 ./node_modules/jsdoc/jsdoc.js -R config/jsdoc/api/index.md -c config/jsdoc/api/conf.json -P package.json -d build/apidoc",
     "apidoc": "shx rm -rf build/apidoc && jsdoc -R config/jsdoc/api/index.md -c config/jsdoc/api/conf.json -P package.json -d build/apidoc"
   },
@@ -104,7 +104,6 @@
     "shx": "^0.3.2",
     "sinon": "^11.1.1",
     "terser-webpack-plugin": "^5.1.1",
-    "typescript": "^4.2.4",
     "url-polyfill": "^1.1.5",
     "walk": "^2.3.9",
     "webpack": "^5.27.2",
@@ -125,6 +124,7 @@
       "@openlayers"
     ],
     "rules": {
+      "jsdoc/no-bad-blocks": "off",
       "import/no-commonjs": "error",
       "@openlayers/no-exclusive-tests": [
         "error",
diff --git a/src/ol/Collection.js b/src/ol/Collection.js
index 30f9498d3a..286f17d1ca 100644
--- a/src/ol/Collection.js
+++ b/src/ol/Collection.js
@@ -44,6 +44,15 @@ export class CollectionEvent extends Event {
   }
 }
 
+/***
+ * @template Return
+ * @typedef {import("./Observable").OnSignature<import("./Observable").EventTypes, import("./events/Event.js").default, Return> &
+ *   import("./Observable").OnSignature<import("./ObjectEventType").Types|'change:length', import("./Object").ObjectEvent, Return> &
+ *   import("./Observable").OnSignature<'add'|'remove', CollectionEvent, Return> &
+ *   import("./Observable").CombinedOnSignature<import("./Observable").EventTypes|import("./ObjectEventType").Types|
+ *     'change:length'|'add'|'remove',Return>} CollectionOnSignature
+ */
+
 /**
  * @typedef {Object} Options
  * @property {boolean} [unique=false] Disallow the same item from being added to
@@ -59,7 +68,7 @@ export class CollectionEvent extends Event {
  * Collection as a whole.
  *
  * @fires CollectionEvent
- * @extends BaseObject<'add'|'remove'|'change:length'>
+ *
  * @template T
  * @api
  */
@@ -71,6 +80,21 @@ class Collection extends BaseObject {
   constructor(opt_array, opt_options) {
     super();
 
+    /***
+     * @type {CollectionOnSignature<import("./Observable.js").OnReturn>}
+     */
+    this.on;
+
+    /***
+     * @type {CollectionOnSignature<import("./Observable.js").OnReturn>}
+     */
+    this.once;
+
+    /***
+     * @type {CollectionOnSignature<void>}
+     */
+    this.un;
+
     const options = opt_options || {};
 
     /**
diff --git a/src/ol/Feature.js b/src/ol/Feature.js
index 6d7b808516..834e618fa1 100644
--- a/src/ol/Feature.js
+++ b/src/ol/Feature.js
@@ -14,6 +14,14 @@ import {listen, unlistenByKey} from './events.js';
  * @typedef {Feature|import("./render/Feature.js").default} FeatureLike
  */
 
+/***
+ * @template Return
+ * @typedef {import("./Observable").OnSignature<import("./Observable").EventTypes, import("./events/Event.js").default, Return> &
+ *   import("./Observable").OnSignature<import("./ObjectEventType").Types|'change:geometry', import("./Object").ObjectEvent, Return> &
+ *   import("./Observable").CombinedOnSignature<import("./Observable").EventTypes|import("./ObjectEventType").Types
+ *     |'change:geometry', Return>} FeatureOnSignature
+ */
+
 /**
  * @classdesc
  * A vector object for geographic features with a geometry and other
@@ -58,7 +66,6 @@ import {listen, unlistenByKey} from './events.js';
  *
  * @api
  * @template {import("./geom/Geometry.js").default} Geometry
- * @extends BaseObject<'change:geometry'>
  */
 class Feature extends BaseObject {
   /**
@@ -70,6 +77,21 @@ class Feature extends BaseObject {
   constructor(opt_geometryOrProperties) {
     super();
 
+    /***
+     * @type {FeatureOnSignature<import("./Observable.js").OnReturn>}
+     */
+    this.on;
+
+    /***
+     * @type {FeatureOnSignature<import("./Observable.js").OnReturn>}
+     */
+    this.once;
+
+    /***
+     * @type {FeatureOnSignature<void>}
+     */
+    this.un;
+
     /**
      * @private
      * @type {number|string|undefined}
diff --git a/src/ol/Geolocation.js b/src/ol/Geolocation.js
index ceda60f9e8..e9a2668f53 100644
--- a/src/ol/Geolocation.js
+++ b/src/ol/Geolocation.js
@@ -61,6 +61,21 @@ class GeolocationError extends BaseEvent {
  * is reported in.
  */
 
+/**
+ * @typedef {import("./ObjectEventType").Types|'change:accuracy'|'change:accuracyGeometry'|'change:altitude'|
+ *    'change:altitudeAccuracy'|'change:heading'|'change:position'|'change:projection'|'change:speed'|'change:tracking'|
+ *    'change:trackingOptions'} GeolocationObjectEventTypes
+ */
+
+/***
+ * @template Return
+ * @typedef {import("./Observable").OnSignature<import("./Observable").EventTypes, import("./events/Event.js").default, Return> &
+ *   import("./Observable").OnSignature<GeolocationObjectEventTypes, import("./Object").ObjectEvent, Return> &
+ *   import("./Observable").OnSignature<'error', GeolocationError, Return> &
+ *   import("./Observable").CombinedOnSignature<import("./Observable").EventTypes|GeolocationObjectEventTypes|
+ *     'error', Return>} GeolocationOnSignature
+ */
+
 /**
  * @classdesc
  * Helper class for providing HTML5 Geolocation capabilities.
@@ -82,7 +97,6 @@ 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 {
@@ -92,6 +106,21 @@ class Geolocation extends BaseObject {
   constructor(opt_options) {
     super();
 
+    /***
+     * @type {GeolocationOnSignature<import("./Observable.js").OnReturn>}
+     */
+    this.on;
+
+    /***
+     * @type {GeolocationOnSignature<import("./Observable.js").OnReturn>}
+     */
+    this.once;
+
+    /***
+     * @type {GeolocationOnSignature<void>}
+     */
+    this.un;
+
     const options = opt_options || {};
 
     /**
diff --git a/src/ol/MapBrowserEventType.js b/src/ol/MapBrowserEventType.js
index d345607821..c5f4d1053e 100644
--- a/src/ol/MapBrowserEventType.js
+++ b/src/ol/MapBrowserEventType.js
@@ -53,3 +53,7 @@ export default {
   POINTERLEAVE: 'pointerleave',
   POINTERCANCEL: 'pointercancel',
 };
+
+/***
+ * @typedef {'singleclick'|'click'|'dblclick'|'pointerdrag'|'pointermove'} Types
+ */
diff --git a/src/ol/MapEventType.js b/src/ol/MapEventType.js
index 1f919c3e38..08ac0645c2 100644
--- a/src/ol/MapEventType.js
+++ b/src/ol/MapEventType.js
@@ -27,3 +27,7 @@ export default {
    */
   MOVEEND: 'moveend',
 };
+
+/***
+ * @typedef {'postrender'|'movestart'|'moveend'} Types
+ */
diff --git a/src/ol/Object.js b/src/ol/Object.js
index a5ae717b8f..37f5bc9cb1 100644
--- a/src/ol/Object.js
+++ b/src/ol/Object.js
@@ -37,6 +37,13 @@ export class ObjectEvent extends Event {
   }
 }
 
+/***
+ * @template Return
+ * @typedef {import("./Observable").OnSignature<import("./Observable").EventTypes, import("./events/Event.js").default, Return> &
+ *    import("./Observable").OnSignature<import("./ObjectEventType").Types, ObjectEvent, Return> &
+ *    import("./Observable").CombinedOnSignature<import("./Observable").EventTypes|import("./ObjectEventType").Types, Return>} ObjectOnSignature
+ */
+
 /**
  * @classdesc
  * Abstract base class; normally only used for creating subclasses and not
@@ -78,8 +85,6 @@ export class ObjectEvent extends Event {
  * object.unset('foo').
  *
  * @fires ObjectEvent
- * @template {string} EventTypes
- * @extends Observable<'propertychange'|EventTypes>
  * @api
  */
 class BaseObject extends Observable {
@@ -89,6 +94,21 @@ class BaseObject extends Observable {
   constructor(opt_values) {
     super();
 
+    /***
+     * @type {ObjectOnSignature<import("./Observable.js").OnReturn>}
+     */
+    this.on;
+
+    /***
+     * @type {ObjectOnSignature<import("./Observable.js").OnReturn>}
+     */
+    this.once;
+
+    /***
+     * @type {ObjectOnSignature<void>}
+     */
+    this.un;
+
     // Call {@link module:ol/util.getUid} to ensure that the order of objects' ids is
     // the same as the order in which they were created.  This also helps to
     // ensure that object properties are always added in the same order, which
diff --git a/src/ol/ObjectEventType.js b/src/ol/ObjectEventType.js
index 58dcb20f31..8e2d9996d2 100644
--- a/src/ol/ObjectEventType.js
+++ b/src/ol/ObjectEventType.js
@@ -13,3 +13,7 @@ export default {
    */
   PROPERTYCHANGE: 'propertychange',
 };
+
+/**
+ * @typedef {'propertychange'} Types
+ */
diff --git a/src/ol/Observable.js b/src/ol/Observable.js
index be5a9412c3..0ece198813 100644
--- a/src/ol/Observable.js
+++ b/src/ol/Observable.js
@@ -5,9 +5,25 @@ import EventTarget from './events/Target.js';
 import EventType from './events/EventType.js';
 import {listen, listenOnce, unlistenByKey} from './events.js';
 
+/***
+ * @template {string} Type
+ * @template {Event|import("./events/Event.js").default} EventClass
+ * @template Return
+ * @typedef {(type: Type|Type[], listener: (event: EventClass) => (void|boolean)) => Return} OnSignature
+ */
+
+/***
+ * @template {string} Type
+ * @template Return
+ * @typedef {(type: Type[], listener: (event: Event|import("./events/Event").default) => (void|boolean)) => Return} CombinedOnSignature
+ */
+
+/***
+ * @typedef {import("./events").EventsKey|Array<import("./events").EventsKey>} OnReturn
+ */
+
 /**
- * @template ChildTypes
- * @typedef {ChildTypes|'change'|'error'|Array<ChildTypes|'change'|'error'>} EventTypes
+ * @typedef {'change'|'error'} EventTypes
  */
 
 /**
@@ -19,13 +35,27 @@ 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 {
   constructor() {
     super();
 
+    /***
+     * @type {OnSignature<EventTypes, import("./events/Event.js").default, OnReturn>}
+     */
+    this.on = this.onInternal;
+
+    /***
+     * @type {OnSignature<EventTypes, import("./events/Event.js").default, OnReturn>}
+     */
+    this.once = this.onceInternal;
+
+    /***
+     * @type {OnSignature<EventTypes, import("./events/Event.js").default, void>}
+     */
+    this.un = this.unInternal;
+
     /**
      * @private
      * @type {number}
@@ -53,15 +83,12 @@ class Observable extends EventTarget {
   }
 
   /**
-   * Listen for a certain type of event.
-   * @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
-   *     will be an array of keys.
-   * @api
+   * @param {string|Array<string>} type Type.
+   * @param {function(?): (void|boolean)} listener Listener.
+   * @return {import("./events.js").EventsKey|Array<import("./events.js").EventsKey>} Event key.
+   * @protected
    */
-  on(type, listener) {
+  onInternal(type, listener) {
     if (Array.isArray(type)) {
       const len = type.length;
       const keys = new Array(len);
@@ -75,15 +102,12 @@ class Observable extends EventTarget {
   }
 
   /**
-   * Listen once for a certain type of event.
-   * @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
-   *     will be an array of keys.
-   * @api
+   * @param {string|Array<string>} type Type.
+   * @param {function(?): (void|boolean)} listener Listener.
+   * @return {import("./events.js").EventsKey|Array<import("./events.js").EventsKey>} Event key.
+   * @protected
    */
-  once(type, listener) {
+  onceInternal(type, listener) {
     let key;
     if (Array.isArray(type)) {
       const len = type.length;
@@ -100,11 +124,11 @@ class Observable extends EventTarget {
 
   /**
    * Unlisten for a certain type of event.
-   * @param {EventTypes<ChildTypes>} type The event type or array of event types.
-   * @param {function(?): ?} listener The listener function.
-   * @api
+   * @param {string|Array<string>} type Type.
+   * @param {function(?): (void|boolean)} listener Listener.
+   * @protected
    */
-  un(type, listener) {
+  unInternal(type, listener) {
     const key = /** @type {Object} */ (listener).ol_key;
     if (key) {
       unByKey(key);
@@ -118,6 +142,39 @@ class Observable extends EventTarget {
   }
 }
 
+/**
+ * Listen for a certain type of event.
+ * @function
+ * @param {string|Array<string>} type The event type or array of event types.
+ * @param {function((Event|import("./events/Event").default)): (void|boolean)} 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
+ *     will be an array of keys.
+ * @api
+ */
+Observable.prototype.on;
+
+/**
+ * Listen once for a certain type of event.
+ * @function
+ * @param {string|Array<string>} type The event type or array of event types.
+ * @param {function((Event|import("./events/Event").default)): (void|boolean)} 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
+ *     will be an array of keys.
+ * @api
+ */
+Observable.prototype.once;
+
+/**
+ * Unlisten for a certain type of event.
+ * @function
+ * @param {string|Array<string>} type The event type or array of event types.
+ * @param {function((Event|import("./events/Event").default)): (void|boolean)} listener The listener function.
+ * @api
+ */
+Observable.prototype.un;
+
 /**
  * Removes an event listener using the key returned by `on()` or `once()`.
  * @param {import("./events.js").EventsKey|Array<import("./events.js").EventsKey>} key The key returned by `on()`
diff --git a/src/ol/Overlay.js b/src/ol/Overlay.js
index e4a2ace6b5..6391d3c874 100644
--- a/src/ol/Overlay.js
+++ b/src/ol/Overlay.js
@@ -83,6 +83,18 @@ const Property = {
   POSITIONING: 'positioning',
 };
 
+/**
+ * @typedef {import("./ObjectEventType").Types|'change:element'|'change:map'|'change:offset'|'change:position'|
+ *   'change:positioning'} OverlayObjectEventTypes
+ */
+
+/***
+ * @template Return
+ * @typedef {import("./Observable").OnSignature<import("./Observable").EventTypes, import("./events/Event.js").default, Return> &
+ *   import("./Observable").OnSignature<OverlayObjectEventTypes, import("./Object").ObjectEvent, Return> &
+ *   import("./Observable").CombinedOnSignature<import("./Observable").EventTypes|OverlayObjectEventTypes, Return>} OverlayOnSignature
+ */
+
 /**
  * @classdesc
  * An element to be displayed over the map and attached to a single map
@@ -101,7 +113,6 @@ 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 {
@@ -111,6 +122,21 @@ class Overlay extends BaseObject {
   constructor(options) {
     super();
 
+    /***
+     * @type {OverlayOnSignature<import("./Observable").OnReturn>}
+     */
+    this.on;
+
+    /***
+     * @type {OverlayOnSignature<import("./Observable").OnReturn>}
+     */
+    this.once;
+
+    /***
+     * @type {OverlayOnSignature<void>}
+     */
+    this.un;
+
     /**
      * @protected
      * @type {Options}
diff --git a/src/ol/PluggableMap.js b/src/ol/PluggableMap.js
index bdc431cae9..4d8dfdb557 100644
--- a/src/ol/PluggableMap.js
+++ b/src/ol/PluggableMap.js
@@ -86,6 +86,22 @@ import {removeNode} from './dom.js';
  * @property {Object<string, *>} values Values.
  */
 
+/**
+ * @typedef {import("./ObjectEventType").Types|'change:layergroup'|'change:size'|'change:target'|'change:view'} MapObjectEventTypes
+ */
+
+/***
+ * @template Return
+ * @typedef {import("./Observable").OnSignature<import("./Observable").EventTypes, import("./events/Event.js").default, Return> &
+ *    import("./Observable").OnSignature<MapObjectEventTypes, import("./Object").ObjectEvent, Return> &
+ *    import("./Observable").OnSignature<import("./MapBrowserEventType").Types, import("./MapBrowserEvent").default, Return> &
+ *    import("./Observable").OnSignature<import("./MapEventType").Types, import("./MapEvent").default, Return> &
+ *    import("./Observable").OnSignature<import("./render/EventType").MapRenderEventTypes, import("./render/Event").default, Return> &
+ *    import("./Observable").CombinedOnSignature<import("./Observable").EventTypes|MapObjectEventTypes|
+ *      import("./MapBrowserEventType").Types|import("./MapEventType").Types|
+ *      import("./render/EventType").MapRenderEventTypes, Return>} PluggableMapOnSignature
+ */
+
 /**
  * Object literal with config options for the map.
  * @typedef {Object} MapOptions
@@ -127,12 +143,6 @@ import {removeNode} from './dom.js';
  */
 
 /**
- * @fires import("./MapBrowserEvent.js").MapBrowserEvent
- * @fires import("./MapEvent.js").MapEvent
- * @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 {
@@ -142,6 +152,21 @@ class PluggableMap extends BaseObject {
   constructor(options) {
     super();
 
+    /***
+     * @type {PluggableMapOnSignature<import("./Observable.js").OnReturn>}
+     */
+    this.on;
+
+    /***
+     * @type {PluggableMapOnSignature<import("./Observable.js").OnReturn>}
+     */
+    this.once;
+
+    /***
+     * @type {PluggableMapOnSignature<void>}
+     */
+    this.un;
+
     const optionsInternal = createOptionsInternal(options);
 
     /** @private */
diff --git a/src/ol/View.js b/src/ol/View.js
index 7df9e8d5f4..9fe4a8c23c 100644
--- a/src/ol/View.js
+++ b/src/ol/View.js
@@ -218,6 +218,17 @@ import {fromExtent as polygonFromExtent} from './geom/Polygon.js';
  */
 const DEFAULT_MIN_ZOOM = 0;
 
+/**
+ * @typedef {import("./ObjectEventType").Types|'change:center'|'change:resolution'|'change:rotation'} ViewObjectEventTypes
+ */
+
+/***
+ * @template Return
+ * @typedef {import("./Observable").OnSignature<import("./Observable").EventTypes, import("./events/Event.js").default, Return> &
+ *   import("./Observable").OnSignature<ViewObjectEventTypes, import("./Object").ObjectEvent, Return> &
+ *   import("./Observable").CombinedOnSignature<import("./Observable").EventTypes|ViewObjectEventTypes, Return>} ViewOnSignature
+ */
+
 /**
  * @classdesc
  * A View object represents a simple 2D view of the map.
@@ -288,7 +299,6 @@ 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 {
@@ -298,6 +308,21 @@ class View extends BaseObject {
   constructor(opt_options) {
     super();
 
+    /***
+     * @type {ViewOnSignature<import("./Observable.js").OnReturn>}
+     */
+    this.on;
+
+    /***
+     * @type {ViewOnSignature<import("./Observable.js").OnReturn>}
+     */
+    this.once;
+
+    /***
+     * @type {ViewOnSignature<void>}
+     */
+    this.un;
+
     const options = assign({}, opt_options);
 
     /**
diff --git a/src/ol/control/Control.js b/src/ol/control/Control.js
index 7295b973b0..81cef9b6d8 100644
--- a/src/ol/control/Control.js
+++ b/src/ol/control/Control.js
@@ -41,8 +41,6 @@ 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 {
diff --git a/src/ol/control/FullScreen.js b/src/ol/control/FullScreen.js
index 4362066be4..50906b4ce7 100644
--- a/src/ol/control/FullScreen.js
+++ b/src/ol/control/FullScreen.js
@@ -32,6 +32,15 @@ const FullScreenEventType = {
   LEAVEFULLSCREEN: 'leavefullscreen',
 };
 
+/***
+ * @template Return
+ * @typedef {import("../Observable").OnSignature<import("../Observable").EventTypes|
+ *     'enterfullscreen'|'leavefullscreen', import("../events/Event.js").default, Return> &
+ *   import("../Observable").OnSignature<import("../ObjectEventType").Types, import("../Object").ObjectEvent, Return> &
+ *   import("../Observable").CombinedOnSignature<import("../Observable").EventTypes|
+ *     'enterfullscreen'|'leavefullscreen'|import("../ObjectEventType").Types, Return>} FullScreenOnSignature
+ */
+
 /**
  * @typedef {Object} Options
  * @property {string} [className='ol-full-screen'] CSS class name.
@@ -66,7 +75,6 @@ const FullScreenEventType = {
  *
  * @fires FullScreenEventType#enterfullscreen
  * @fires FullScreenEventType#leavefullscreen
- * @extends Control<'enterfullscreen'|'leavefullscreen'>
  * @api
  */
 class FullScreen extends Control {
@@ -81,6 +89,21 @@ class FullScreen extends Control {
       target: options.target,
     });
 
+    /***
+     * @type {FullScreenOnSignature<import("../Observable.js").OnReturn>}
+     */
+    this.on;
+
+    /***
+     * @type {FullScreenOnSignature<import("../Observable.js").OnReturn>}
+     */
+    this.once;
+
+    /***
+     * @type {FullScreenOnSignature<void>}
+     */
+    this.un;
+
     /**
      * @private
      * @type {string}
diff --git a/src/ol/control/MousePosition.js b/src/ol/control/MousePosition.js
index fb6e2bdff9..a8658548fb 100644
--- a/src/ol/control/MousePosition.js
+++ b/src/ol/control/MousePosition.js
@@ -22,6 +22,15 @@ const PROJECTION = 'projection';
  */
 const COORDINATE_FORMAT = 'coordinateFormat';
 
+/***
+ * @template Return
+ * @typedef {import("../Observable").OnSignature<import("../Observable").EventTypes, import("../events/Event.js").default, Return> &
+ *   import("../Observable").OnSignature<import("../ObjectEventType").Types|
+ *     'change:coordinateFormat'|'change:projection', import("../Object").ObjectEvent, Return> &
+ *   import("../Observable").CombinedOnSignature<import("../Observable").EventTypes|import("../ObjectEventType").Types|
+ *     'change:coordinateFormat'|'change:projection', Return>} MousePositionOnSignature
+ */
+
 /**
  * @typedef {Object} Options
  * @property {string} [className='ol-mouse-position'] CSS class name.
@@ -49,7 +58,6 @@ 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 {
@@ -69,6 +77,21 @@ class MousePosition extends Control {
       target: options.target,
     });
 
+    /***
+     * @type {MousePositionOnSignature<import("../Observable.js").OnReturn>}
+     */
+    this.on;
+
+    /***
+     * @type {MousePositionOnSignature<import("../Observable.js").OnReturn>}
+     */
+    this.once;
+
+    /***
+     * @type {MousePositionOnSignature<void>}
+     */
+    this.un;
+
     this.addChangeListener(PROJECTION, this.handleProjectionChanged_);
 
     if (options.coordinateFormat) {
diff --git a/src/ol/control/ScaleLine.js b/src/ol/control/ScaleLine.js
index e2d9670e91..dc9e09863c 100644
--- a/src/ol/control/ScaleLine.js
+++ b/src/ol/control/ScaleLine.js
@@ -37,6 +37,15 @@ const LEADING_DIGITS = [1, 2, 5];
  */
 const DEFAULT_DPI = 25.4 / 0.28;
 
+/***
+ * @template Return
+ * @typedef {import("../Observable").OnSignature<import("../Observable").EventTypes, import("../events/Event.js").default, Return> &
+ *   import("../Observable").OnSignature<import("../ObjectEventType").Types|
+ *     'change:units', import("../Object").ObjectEvent, Return> &
+ *   import("../Observable").CombinedOnSignature<import("../Observable").EventTypes|import("../ObjectEventType").Types
+ *     |'change:units', Return>} ScaleLineOnSignature
+ */
+
 /**
  * @typedef {Object} Options
  * @property {string} [className='ol-scale-line'] CSS Class name.
@@ -68,7 +77,6 @@ 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 {
@@ -91,6 +99,21 @@ class ScaleLine extends Control {
       target: options.target,
     });
 
+    /***
+     * @type {ScaleLineOnSignature<import("../Observable.js").OnReturn>}
+     */
+    this.on;
+
+    /***
+     * @type {ScaleLineOnSignature<import("../Observable.js").OnReturn>}
+     */
+    this.once;
+
+    /***
+     * @type {ScaleLineOnSignature<void>}
+     */
+    this.un;
+
     /**
      * @private
      * @type {HTMLElement}
diff --git a/src/ol/interaction/DragAndDrop.js b/src/ol/interaction/DragAndDrop.js
index 2065418197..565145e8f3 100644
--- a/src/ol/interaction/DragAndDrop.js
+++ b/src/ol/interaction/DragAndDrop.js
@@ -74,6 +74,16 @@ export class DragAndDropEvent extends Event {
   }
 }
 
+/***
+ * @template Return
+ * @typedef {import("../Observable").OnSignature<import("../Observable").EventTypes, import("../events/Event.js").default, Return> &
+ *   import("../Observable").OnSignature<import("../ObjectEventType").Types|
+ *     'change:active', import("../Object").ObjectEvent, Return> &
+ *   import("../Observable").OnSignature<'addfeatures', DragAndDropEvent, Return> &
+ *   import("../Observable").CombinedOnSignature<import("../Observable").EventTypes|import("../ObjectEventType").Types|
+ *     'change:active'|'addfeatures', Return>} DragAndDropOnSignature
+ */
+
 /**
  * @classdesc
  * Handles input of vector data by drag and drop.
@@ -82,7 +92,6 @@ 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
@@ -98,6 +107,21 @@ class DragAndDrop extends Interaction {
       handleEvent: TRUE,
     });
 
+    /***
+     * @type {DragAndDropOnSignature<import("../Observable").OnReturn>}
+     */
+    this.on;
+
+    /***
+     * @type {DragAndDropOnSignature<import("../Observable").OnReturn>}
+     */
+    this.once;
+
+    /***
+     * @type {DragAndDropOnSignature<void>}
+     */
+    this.un;
+
     /**
      * @private
      * @type {boolean}
diff --git a/src/ol/interaction/DragBox.js b/src/ol/interaction/DragBox.js
index c0bfdc66d3..a43c7f0912 100644
--- a/src/ol/interaction/DragBox.js
+++ b/src/ol/interaction/DragBox.js
@@ -93,6 +93,16 @@ export class DragBoxEvent extends Event {
   }
 }
 
+/***
+ * @template Return
+ * @typedef {import("../Observable").OnSignature<import("../Observable").EventTypes, import("../events/Event.js").default, Return> &
+ *   import("../Observable").OnSignature<import("../ObjectEventType").Types|
+ *     'change:active', import("../Object").ObjectEvent, Return> &
+ *   import("../Observable").OnSignature<'boxcancel'|'boxdrag'|'boxend', DragBoxEvent, Return> &
+ *   import("../Observable").CombinedOnSignature<import("../Observable").EventTypes|import("../ObjectEventType").Types|
+ *     'change:active'|'boxcancel'|'boxdrag'|'boxend', Return>} DragBoxOnSignature
+ */
+
 /**
  * @classdesc
  * Allows the user to draw a vector box by clicking and dragging on the map,
@@ -103,7 +113,6 @@ export class DragBoxEvent extends Event {
  * {@link module:ol/interaction/DragRotateAndZoom}).
  *
  * @fires DragBoxEvent
- * @extends PointerInteraction<'boxcancel'|'boxdrag'|'boxend'>
  * @api
  */
 class DragBox extends PointerInteraction {
@@ -113,6 +122,21 @@ class DragBox extends PointerInteraction {
   constructor(opt_options) {
     super();
 
+    /***
+     * @type {DragBoxOnSignature<import("../Observable").OnReturn>}
+     */
+    this.on;
+
+    /***
+     * @type {DragBoxOnSignature<import("../Observable").OnReturn>}
+     */
+    this.once;
+
+    /***
+     * @type {DragBoxOnSignature<void>}
+     */
+    this.un;
+
     const options = opt_options ? opt_options : {};
 
     /**
diff --git a/src/ol/interaction/Draw.js b/src/ol/interaction/Draw.js
index 664911be03..bc21b5f8a3 100644
--- a/src/ol/interaction/Draw.js
+++ b/src/ol/interaction/Draw.js
@@ -172,12 +172,21 @@ export class DrawEvent extends Event {
   }
 }
 
+/***
+ * @template Return
+ * @typedef {import("../Observable").OnSignature<import("../Observable").EventTypes, import("../events/Event.js").default, Return> &
+ *   import("../Observable").OnSignature<import("../ObjectEventType").Types|
+ *     'change:active', import("../Object").ObjectEvent, Return> &
+ *   import("../Observable").OnSignature<'drawabort'|'drawend'|'drawstart', DrawEvent, Return> &
+ *   import("../Observable").CombinedOnSignature<import("../Observable").EventTypes|import("../ObjectEventType").Types|
+ *     'change:active'|'drawabort'|'drawend'|'drawstart', Return>} DrawOnSignature
+ */
+
 /**
  * @classdesc
  * Interaction for drawing feature geometries.
  *
  * @fires DrawEvent
- * @extends PointerInteraction<'drawabort'|'drawend'|'drawstart'>
  * @api
  */
 class Draw extends PointerInteraction {
@@ -194,6 +203,21 @@ class Draw extends PointerInteraction {
 
     super(pointerOptions);
 
+    /***
+     * @type {DrawOnSignature<import("../Observable").OnReturn>}
+     */
+    this.on;
+
+    /***
+     * @type {DrawOnSignature<import("../Observable").OnReturn>}
+     */
+    this.once;
+
+    /***
+     * @type {DrawOnSignature<void>}
+     */
+    this.un;
+
     /**
      * @type {boolean}
      * @private
diff --git a/src/ol/interaction/Extent.js b/src/ol/interaction/Extent.js
index 73c2ef47a5..9ab7ee430f 100644
--- a/src/ol/interaction/Extent.js
+++ b/src/ol/interaction/Extent.js
@@ -74,6 +74,16 @@ export class ExtentEvent extends Event {
   }
 }
 
+/***
+ * @template Return
+ * @typedef {import("../Observable").OnSignature<import("../Observable").EventTypes, import("../events/Event.js").default, Return> &
+ *   import("../Observable").OnSignature<import("../ObjectEventType").Types|
+ *     'change:active', import("../Object").ObjectEvent, Return> &
+ *   import("../Observable").OnSignature<'extentchanged', ExtentEvent, Return> &
+ *   import("../Observable").CombinedOnSignature<import("../Observable").EventTypes|import("../ObjectEventType").Types|
+ *     'change:active'|'extentchanged', Return>} ExtentOnSignature
+ */
+
 /**
  * @classdesc
  * Allows the user to draw a vector box by clicking and dragging on the map.
@@ -81,7 +91,6 @@ export class ExtentEvent extends Event {
  * This interaction is only supported for mouse devices.
  *
  * @fires ExtentEvent
- * @extends PointerInteraction<'extentchanged'>
  * @api
  */
 class Extent extends PointerInteraction {
@@ -93,6 +102,21 @@ class Extent extends PointerInteraction {
 
     super(/** @type {import("./Pointer.js").Options} */ (options));
 
+    /***
+     * @type {ExtentOnSignature<import("../Observable.js").OnReturn>}
+     */
+    this.on;
+
+    /***
+     * @type {ExtentOnSignature<import("../Observable.js").OnReturn>}
+     */
+    this.once;
+
+    /***
+     * @type {ExtentOnSignature<void>}
+     */
+    this.un;
+
     /**
      * Condition
      * @type {import("../events/condition.js").Condition}
diff --git a/src/ol/interaction/Interaction.js b/src/ol/interaction/Interaction.js
index 03cd91fbfa..ae033f586a 100644
--- a/src/ol/interaction/Interaction.js
+++ b/src/ol/interaction/Interaction.js
@@ -5,6 +5,15 @@ import BaseObject from '../Object.js';
 import InteractionProperty from './Property.js';
 import {easeOut, linear} from '../easing.js';
 
+/***
+ * @template Return
+ * @typedef {import("../Observable").OnSignature<import("../Observable").EventTypes, import("../events/Event.js").default, Return> &
+ *   import("../Observable").OnSignature<import("../ObjectEventType").Types|
+ *     'change:active', import("../Object").ObjectEvent, Return> &
+ *   import("../Observable").CombinedOnSignature<import("../Observable").EventTypes|import("../ObjectEventType").Types|
+ *     'change:active', Return>} InteractionOnSignature
+ */
+
 /**
  * Object literal with config options for interactions.
  * @typedef {Object} InteractionOptions
@@ -27,9 +36,6 @@ 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 {
@@ -39,6 +45,21 @@ class Interaction extends BaseObject {
   constructor(opt_options) {
     super();
 
+    /***
+     * @type {InteractionOnSignature<import("../Observable.js").OnReturn>}
+     */
+    this.on;
+
+    /***
+     * @type {InteractionOnSignature<import("../Observable.js").OnReturn>}
+     */
+    this.once;
+
+    /***
+     * @type {InteractionOnSignature<void>}
+     */
+    this.un;
+
     if (opt_options && opt_options.handleEvent) {
       this.handleEvent = opt_options.handleEvent;
     }
diff --git a/src/ol/interaction/Modify.js b/src/ol/interaction/Modify.js
index bbfbb4f961..2b5be78e81 100644
--- a/src/ol/interaction/Modify.js
+++ b/src/ol/interaction/Modify.js
@@ -164,6 +164,16 @@ export class ModifyEvent extends Event {
   }
 }
 
+/***
+ * @template Return
+ * @typedef {import("../Observable").OnSignature<import("../Observable").EventTypes, import("../events/Event.js").default, Return> &
+ *   import("../Observable").OnSignature<import("../ObjectEventType").Types|
+ *     'change:active', import("../Object").ObjectEvent, Return> &
+ *   import("../Observable").OnSignature<'modifyend'|'modifystart', ModifyEvent, Return> &
+ *   import("../Observable").CombinedOnSignature<import("../Observable").EventTypes|import("../ObjectEventType").Types|
+ *     'change:active'|'modifyend'|'modifystart', Return>} ModifyOnSignature
+ */
+
 /**
  * @classdesc
  * Interaction for modifying feature geometries.  To modify features that have
@@ -183,7 +193,6 @@ 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 {
@@ -193,6 +202,21 @@ class Modify extends PointerInteraction {
   constructor(options) {
     super(/** @type {import("./Pointer.js").Options} */ (options));
 
+    /***
+     * @type {ModifyOnSignature<import("../Observable.js").OnReturn>}
+     */
+    this.on;
+
+    /***
+     * @type {ModifyOnSignature<import("../Observable.js").OnReturn>}
+     */
+    this.once;
+
+    /***
+     * @type {ModifyOnSignature<void>}
+     */
+    this.un;
+
     /** @private */
     this.boundHandleFeatureChange_ = this.handleFeatureChange_.bind(this);
 
diff --git a/src/ol/interaction/Pointer.js b/src/ol/interaction/Pointer.js
index 4c43375afd..a4919e15c1 100644
--- a/src/ol/interaction/Pointer.js
+++ b/src/ol/interaction/Pointer.js
@@ -41,9 +41,6 @@ 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 {
diff --git a/src/ol/interaction/Select.js b/src/ol/interaction/Select.js
index 4152e1b347..b688165fe6 100644
--- a/src/ol/interaction/Select.js
+++ b/src/ol/interaction/Select.js
@@ -134,6 +134,16 @@ export class SelectEvent extends Event {
  */
 const originalFeatureStyles = {};
 
+/***
+ * @template Return
+ * @typedef {import("../Observable").OnSignature<import("../Observable").EventTypes, import("../events/Event.js").default, Return> &
+ *   import("../Observable").OnSignature<import("../ObjectEventType").Types|
+ *     'change:active', import("../Object").ObjectEvent, Return> &
+ *   import("../Observable").OnSignature<'select', SelectEvent, Return> &
+ *   import("../Observable").CombinedOnSignature<import("../Observable").EventTypes|import("../ObjectEventType").Types|
+ *     'change:active'|'select', Return>} SelectOnSignature
+ */
+
 /**
  * @classdesc
  * Interaction for selecting vector features. By default, selected features are
@@ -147,7 +157,6 @@ const originalFeatureStyles = {};
  * Selected features are added to an internal unmanaged layer.
  *
  * @fires SelectEvent
- * @extends Interaction<'select'>
  * @api
  */
 class Select extends Interaction {
@@ -157,6 +166,21 @@ class Select extends Interaction {
   constructor(opt_options) {
     super();
 
+    /***
+     * @type {SelectOnSignature<import("../Observable.js").OnReturn>}
+     */
+    this.on;
+
+    /***
+     * @type {SelectOnSignature<import("../Observable.js").OnReturn>}
+     */
+    this.once;
+
+    /***
+     * @type {SelectOnSignature<void>}
+     */
+    this.un;
+
     const options = opt_options ? opt_options : {};
 
     /**
diff --git a/src/ol/interaction/Translate.js b/src/ol/interaction/Translate.js
index 2e2ef7466e..3ef0dd610b 100644
--- a/src/ol/interaction/Translate.js
+++ b/src/ol/interaction/Translate.js
@@ -110,12 +110,21 @@ export class TranslateEvent extends Event {
   }
 }
 
+/***
+ * @template Return
+ * @typedef {import("../Observable").OnSignature<import("../Observable").EventTypes, import("../events/Event.js").default, Return> &
+ *   import("../Observable").OnSignature<import("../ObjectEventType").Types|
+ *     'change:active', import("../Object").ObjectEvent, Return> &
+ *   import("../Observable").OnSignature<'translateend'|'translatestart'|'translating', TranslateEvent, Return> &
+ *   import("../Observable").CombinedOnSignature<import("../Observable").EventTypes|import("../ObjectEventType").Types|
+ *     'change:active'|'translateend'|'translatestart'|'translating', Return>} TranslateOnSignature
+ */
+
 /**
  * @classdesc
  * Interaction for translating (moving) features.
  *
  * @fires TranslateEvent
- * @extends PointerInteraction<'translateend'|'translatestart'|'translating'>
  * @api
  */
 class Translate extends PointerInteraction {
@@ -127,6 +136,21 @@ class Translate extends PointerInteraction {
 
     super(/** @type {import("./Pointer.js").Options} */ (options));
 
+    /***
+     * @type {TranslateOnSignature<import("../Observable.js").OnReturn>}
+     */
+    this.on;
+
+    /***
+     * @type {TranslateOnSignature<import("../Observable.js").OnReturn>}
+     */
+    this.once;
+
+    /***
+     * @type {TranslateOnSignature<void>}
+     */
+    this.un;
+
     /**
      * The last position we translated to.
      * @type {import("../coordinate.js").Coordinate}
diff --git a/src/ol/layer/Base.js b/src/ol/layer/Base.js
index 26cf842e98..c4671dfca2 100644
--- a/src/ol/layer/Base.js
+++ b/src/ol/layer/Base.js
@@ -8,6 +8,18 @@ import {assert} from '../asserts.js';
 import {assign} from '../obj.js';
 import {clamp} from '../math.js';
 
+/**
+ * @typedef {import("../ObjectEventType").Types|'change:extent'|'change:maxResolution'|'change:maxZoom'|
+ *    'change:minResolution'|'change:minZoom'|'change:opacity'|'change:visible'|'change:zIndex'} BaseLayerObjectEventTypes
+ */
+
+/***
+ * @template Return
+ * @typedef {import("../Observable").OnSignature<import("../Observable").EventTypes, import("../events/Event.js").default, Return> &
+ *   import("../Observable").OnSignature<BaseLayerObjectEventTypes, import("../Object").ObjectEvent, Return> &
+ *   import("../Observable").CombinedOnSignature<import("../Observable").EventTypes|BaseLayerObjectEventTypes, Return>} BaseLayerOnSignature
+ */
+
 /**
  * @typedef {Object} Options
  * @property {string} [className='ol-layer'] A CSS class name to set to the layer element.
@@ -38,8 +50,6 @@ 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 {
@@ -49,6 +59,21 @@ class BaseLayer extends BaseObject {
   constructor(options) {
     super();
 
+    /***
+     * @type {BaseLayerOnSignature<import("../Observable.js").OnReturn>}
+     */
+    this.on;
+
+    /***
+     * @type {BaseLayerOnSignature<import("../Observable.js").OnReturn>}
+     */
+    this.once;
+
+    /***
+     * @type {BaseLayerOnSignature<void>}
+     */
+    this.un;
+
     /**
      * @type {Object<string, *>}
      */
diff --git a/src/ol/layer/BaseTile.js b/src/ol/layer/BaseTile.js
index ba4344c912..5fd7d8cd9d 100644
--- a/src/ol/layer/BaseTile.js
+++ b/src/ol/layer/BaseTile.js
@@ -5,6 +5,16 @@ import Layer from './Layer.js';
 import TileProperty from './TileProperty.js';
 import {assign} from '../obj.js';
 
+/***
+ * @template Return
+ * @typedef {import("../Observable").OnSignature<import("../Observable").EventTypes, import("../events/Event.js").default, Return> &
+ *   import("../Observable").OnSignature<import("./Base").BaseLayerObjectEventTypes|
+ *     'change:source'|'change:preload'|'change:useInterimTilesOnError', import("../Object").ObjectEvent, Return> &
+ *   import("../Observable").OnSignature<import("../render/EventType").LayerRenderEventTypes, import("../render/Event").default, Return> &
+ *   import("../Observable").CombinedOnSignature<import("../Observable").EventTypes|import("./Base").BaseLayerObjectEventTypes|
+ *   'change:source'|'change:preload'|'change:useInterimTilesOnError'|import("../render/EventType").LayerRenderEventTypes, Return>} BaseTileLayerOnSignature
+ */
+
 /**
  * @template {import("../source/Tile.js").default} TileSourceType
  * @typedef {Object} Options
@@ -45,7 +55,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,'preload'|'useInterimTilesOnError'>
+ * @extends {Layer<TileSourceType>}
  * @api
  */
 class BaseTileLayer extends Layer {
@@ -61,6 +71,21 @@ class BaseTileLayer extends Layer {
     delete baseOptions.useInterimTilesOnError;
     super(baseOptions);
 
+    /***
+     * @type {BaseTileLayerOnSignature<import("../Observable.js").OnReturn>}
+     */
+    this.on;
+
+    /***
+     * @type {BaseTileLayerOnSignature<import("../Observable.js").OnReturn>}
+     */
+    this.once;
+
+    /***
+     * @type {BaseTileLayerOnSignature<void>}
+     */
+    this.un;
+
     this.setPreload(options.preload !== undefined ? options.preload : 0);
     this.setUseInterimTilesOnError(
       options.useInterimTilesOnError !== undefined
diff --git a/src/ol/layer/BaseVector.js b/src/ol/layer/BaseVector.js
index daa60af223..262613d418 100644
--- a/src/ol/layer/BaseVector.js
+++ b/src/ol/layer/BaseVector.js
@@ -73,8 +73,7 @@ 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
- * @template {string} EventTypes
- * @extends Layer<VectorSourceType,EventTypes>
+ * @extends {Layer<VectorSourceType>}
  * @api
  */
 class BaseVectorLayer extends Layer {
diff --git a/src/ol/layer/Layer.js b/src/ol/layer/Layer.js
index 59188d25f4..57aafb521c 100644
--- a/src/ol/layer/Layer.js
+++ b/src/ol/layer/Layer.js
@@ -14,6 +14,16 @@ import {listen, unlistenByKey} from '../events.js';
  * @typedef {function(import("../PluggableMap.js").FrameState):HTMLElement} RenderFunction
  */
 
+/***
+ * @template Return
+ * @typedef {import("../Observable").OnSignature<import("../Observable").EventTypes, import("../events/Event.js").default, Return> &
+ *   import("../Observable").OnSignature<import("./Base").BaseLayerObjectEventTypes|
+ *     'change:source', import("../Object").ObjectEvent, Return> &
+ *   import("../Observable").OnSignature<import("../render/EventType").LayerRenderEventTypes, import("../render/Event").default, Return> &
+ *   import("../Observable").CombinedOnSignature<import("../Observable").EventTypes|import("./Base").BaseLayerObjectEventTypes|'change:source'|
+ *     import("../render/EventType").LayerRenderEventTypes, Return>} LayerOnSignature
+ */
+
 /**
  * @template {import("../source/Source.js").default} SourceType
  * @typedef {Object} Options
@@ -84,8 +94,6 @@ 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 {
@@ -98,6 +106,21 @@ class Layer extends BaseLayer {
 
     super(baseOptions);
 
+    /***
+     * @type {LayerOnSignature<import("../Observable.js").OnReturn>}
+     */
+    this.on;
+
+    /***
+     * @type {LayerOnSignature<import("../Observable.js").OnReturn>}
+     */
+    this.once;
+
+    /***
+     * @type {LayerOnSignature<void>}
+     */
+    this.un;
+
     /**
      * @private
      * @type {?import("../events.js").EventsKey}
diff --git a/src/ol/layer/VectorTile.js b/src/ol/layer/VectorTile.js
index e6642777f6..9921a3ccc5 100644
--- a/src/ol/layer/VectorTile.js
+++ b/src/ol/layer/VectorTile.js
@@ -8,6 +8,16 @@ import VectorTileRenderType from './VectorTileRenderType.js';
 import {assert} from '../asserts.js';
 import {assign} from '../obj.js';
 
+/***
+ * @template Return
+ * @typedef {import("../Observable").OnSignature<import("../Observable").EventTypes, import("../events/Event.js").default, Return> &
+ *   import("../Observable").OnSignature<import("./Base").BaseLayerObjectEventTypes|
+ *     'change:source'|'change:preload'|'change:useInterimTilesOnError', import("../Object").ObjectEvent, Return> &
+ *   import("../Observable").OnSignature<import("../render/EventType").LayerRenderEventTypes, import("../render/Event").default, Return> &
+ *   import("../Observable").CombinedOnSignature<import("../Observable").EventTypes|import("./Base").BaseLayerObjectEventTypes|
+ *     'change:source'|'change:preload'|'change:useInterimTilesOnError'|import("../render/EventType").LayerRenderEventTypes, Return>} VectorTileLayerOnSignature
+ */
+
 /**
  * @typedef {Object} Options
  * @property {string} [className='ol-layer'] A CSS class name to set to the layer element.
@@ -75,7 +85,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,'change:preload'|'change:useInterimTilesOnError'>
+ * @extends {BaseVectorLayer<import("../source/VectorTile.js").default>}
  * @api
  */
 class VectorTileLayer extends BaseVectorLayer {
@@ -95,6 +105,21 @@ class VectorTileLayer extends BaseVectorLayer {
       )
     );
 
+    /***
+     * @type {VectorTileLayerOnSignature<import("../Observable.js").OnReturn>}
+     */
+    this.on;
+
+    /***
+     * @type {VectorTileLayerOnSignature<import("../Observable.js").OnReturn>}
+     */
+    this.once;
+
+    /***
+     * @type {VectorTileLayerOnSignature<void>}
+     */
+    this.un;
+
     if (options.renderMode === VectorTileRenderType.IMAGE) {
       //FIXME deprecated - remove this check in v7.
       //eslint-disable-next-line
diff --git a/src/ol/render/EventType.js b/src/ol/render/EventType.js
index 691e4eb222..3cb18dc05c 100644
--- a/src/ol/render/EventType.js
+++ b/src/ol/render/EventType.js
@@ -45,3 +45,11 @@ export default {
    */
   RENDERCOMPLETE: 'rendercomplete',
 };
+
+/**
+ * @typedef {'postrender'|'precompose'|'postcompose'|'rendercomplete'} MapRenderEventTypes
+ */
+
+/**
+ * @typedef {'postrender'|'prerender'} LayerRenderEventTypes
+ */
diff --git a/src/ol/source/Image.js b/src/ol/source/Image.js
index 1372b3978b..f2df3fef46 100644
--- a/src/ol/source/Image.js
+++ b/src/ol/source/Image.js
@@ -38,6 +38,10 @@ export const ImageSourceEventType = {
   IMAGELOADERROR: 'imageloaderror',
 };
 
+/**
+ * @typedef {'imageloadend'|'imageloaderror'|'imageloadstart'} ImageSourceEventTypes
+ */
+
 /**
  * @classdesc
  * Events emitted by {@link module:ol/source/Image~ImageSource} instances are instances of this
@@ -60,6 +64,15 @@ export class ImageSourceEvent extends Event {
   }
 }
 
+/***
+ * @template Return
+ * @typedef {import("../Observable").OnSignature<import("../Observable").EventTypes, import("../events/Event.js").default, Return> &
+ *   import("../Observable").OnSignature<import("../ObjectEventType").Types, import("../Object").ObjectEvent, Return> &
+ *   import("../Observable").OnSignature<ImageSourceEventTypes, ImageSourceEvent, Return> &
+ *   import("../Observable").CombinedOnSignature<import("../Observable").EventTypes|import("../ObjectEventType").Types
+ *     |ImageSourceEventTypes, Return>} ImageSourceOnSignature
+ */
+
 /**
  * @typedef {Object} Options
  * @property {import("./Source.js").AttributionLike} [attributions] Attributions.
@@ -76,7 +89,6 @@ 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 {
@@ -90,6 +102,21 @@ class ImageSource extends Source {
       state: options.state,
     });
 
+    /***
+     * @type {ImageSourceOnSignature<import("../Observable.js").OnReturn>}
+     */
+    this.on;
+
+    /***
+     * @type {ImageSourceOnSignature<import("../Observable.js").OnReturn>}
+     */
+    this.once;
+
+    /***
+     * @type {ImageSourceOnSignature<void>}
+     */
+    this.un;
+
     /**
      * @private
      * @type {Array<number>}
diff --git a/src/ol/source/Source.js b/src/ol/source/Source.js
index e05c7cc0fc..e2b50a8f6d 100644
--- a/src/ol/source/Source.js
+++ b/src/ol/source/Source.js
@@ -40,8 +40,6 @@ 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
  */
diff --git a/src/ol/source/Tile.js b/src/ol/source/Tile.js
index 1b8519cfd3..ca21e646a1 100644
--- a/src/ol/source/Tile.js
+++ b/src/ol/source/Tile.js
@@ -15,6 +15,15 @@ import {
 } from '../tilegrid.js';
 import {scale as scaleSize, toSize} from '../size.js';
 
+/***
+ * @template Return
+ * @typedef {import("../Observable").OnSignature<import("../Observable").EventTypes, import("../events/Event.js").default, Return> &
+ *   import("../Observable").OnSignature<import("../ObjectEventType").Types, import("../Object").ObjectEvent, Return> &
+ *   import("../Observable").OnSignature<import("./TileEventType").TileSourceEventTypes, TileSourceEvent, Return> &
+ *   import("../Observable").CombinedOnSignature<import("../Observable").EventTypes|import("../ObjectEventType").Types|
+ *     import("./TileEventType").TileSourceEventTypes, Return>} TileSourceOnSignature
+ */
+
 /**
  * @typedef {Object} Options
  * @property {import("./Source.js").AttributionLike} [attributions] Attributions.
@@ -36,8 +45,6 @@ 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
  */
@@ -54,6 +61,21 @@ class TileSource extends Source {
       wrapX: options.wrapX,
     });
 
+    /***
+     * @type {TileSourceOnSignature<import("../Observable.js").OnReturn>}
+     */
+    this.on;
+
+    /***
+     * @type {TileSourceOnSignature<import("../Observable.js").OnReturn>}
+     */
+    this.once;
+
+    /***
+     * @type {TileSourceOnSignature<void>}
+     */
+    this.un;
+
     /**
      * @private
      * @type {boolean}
diff --git a/src/ol/source/TileEventType.js b/src/ol/source/TileEventType.js
index 3afb10f9d5..b98d18a555 100644
--- a/src/ol/source/TileEventType.js
+++ b/src/ol/source/TileEventType.js
@@ -28,3 +28,7 @@ export default {
    */
   TILELOADERROR: 'tileloaderror',
 };
+
+/**
+ * @typedef {'tileloadstart'|'tileloadend'|'tileloaderror'} TileSourceEventTypes
+ */
diff --git a/src/ol/source/UrlTile.js b/src/ol/source/UrlTile.js
index 7bb9705c1d..db86b77038 100644
--- a/src/ol/source/UrlTile.js
+++ b/src/ol/source/UrlTile.js
@@ -33,7 +33,6 @@ 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 {
   /**
diff --git a/src/ol/source/Vector.js b/src/ol/source/Vector.js
index 433bb05e94..eda2f79588 100644
--- a/src/ol/source/Vector.js
+++ b/src/ol/source/Vector.js
@@ -61,6 +61,15 @@ export class VectorSourceEvent extends Event {
   }
 }
 
+/***
+ * @template Return
+ * @typedef {import("../Observable").OnSignature<import("../Observable").EventTypes, import("../events/Event.js").default, Return> &
+ *   import("../Observable").OnSignature<import("../ObjectEventType").Types, import("../Object").ObjectEvent, Return> &
+ *   import("../Observable").OnSignature<import("./VectorEventType").VectorSourceEventTypes, VectorSourceEvent, Return> &
+ *   import("../Observable").CombinedOnSignature<import("../Observable").EventTypes|import("../ObjectEventType").Types|
+ *     import("./VectorEventType").VectorSourceEventTypes, Return>} VectorSourceOnSignature
+ */
+
 /**
  * @typedef {Object} Options
  * @property {import("./Source.js").AttributionLike} [attributions] Attributions.
@@ -177,6 +186,21 @@ class VectorSource extends Source {
       wrapX: options.wrapX !== undefined ? options.wrapX : true,
     });
 
+    /***
+     * @type {VectorSourceOnSignature<import("../Observable.js").OnReturn>}
+     */
+    this.on;
+
+    /***
+     * @type {VectorSourceOnSignature<import("../Observable.js").OnReturn>}
+     */
+    this.once;
+
+    /***
+     * @type {VectorSourceOnSignature<void>}
+     */
+    this.un;
+
     /**
      * @private
      * @type {import("../featureloader.js").FeatureLoader}
diff --git a/src/ol/source/VectorEventType.js b/src/ol/source/VectorEventType.js
index a1d6016ad3..01d119093a 100644
--- a/src/ol/source/VectorEventType.js
+++ b/src/ol/source/VectorEventType.js
@@ -56,3 +56,7 @@ export default {
    */
   FEATURESLOADERROR: 'featuresloaderror',
 };
+
+/**
+ * @typedef {'addfeature'|'clear'|'removefeature'|'featuresloadstart'|'featuresloadend'|'featuresloaderror'} VectorSourceEventTypes
+ */