Observe Event

dom-event-map-definitions.ts

type DOMEventMapDefinitions = [
  [HTMLElement, HTMLElementEventMap],
  [Document, DocumentEventMap],
  [Window, WindowEventMap],
  [FileReader, FileReaderEventMap],
  [Element, ElementEventMap],
  [Animation, AnimationEventMap],
  [EventSource, EventSourceEventMap],
  [AbortSignal, AbortSignalEventMap],
  [AbstractWorker, AbstractWorkerEventMap],
  [MediaQueryList, MediaQueryListEventMap]
  // ...
];

export type { DOMEventMapDefinitions }

dom-event-subscriber.ts

import type { DOMEventMapDefinitions } from './dom-event-map-definitions';

type DOMEventSubscriber = DOMEventMapDefinitions[number][0];

export type { DOMEventSubscriber }

get-dom-event-maps.ts

import type { DOMEventMapDefinitions } from './dom-event-map-definitions';
import type { DOMEventSubscriber } from './dom-event-subscriber';

type GetDOMEventMaps<T extends DOMEventSubscriber> = MapDefinitionToEventMap<
  DOMEventMapDefinitions,
  T
>;

export type { GetDOMEventMaps }

map-definition-to-event-map.ts

type MapDefinitionToEventMap<D extends { [K: number]: any[] }, T> = {
  [K in keyof D]: D[K] extends any[]
    ? T extends D[K][0]
      ? D[K][1]
      : never
    : never;
};
  
 export type { MapDefinitionToEventMap }

map-event-maps-to-event.ts

type MapEventMapsToEvent<
  D extends { [K: number]: any },
  T extends PropertyKey
> = {
  [K in keyof D]: D[K] extends never
    ? never
    : T extends keyof D[K]
    ? D[K][T]
    : never;
};

map-event-maps-to-keys.ts

type MapEventMapsToKeys<D extends { [K: number]: any }> = {
  [K in keyof D]: D[K] extends never ? never : keyof D[K];
};
  
export type { MapEventMapsToKeys }

observe-event.ts

import type { DOMEventSubscriber } from './dom-event-subscriber';
import type { MapEventMapsToKeys } from './map-event-maps-to-keys';
import type { GetDOMEventMaps } from './get-dom-event-maps';
import type { MapEventMapsToEvent } from './map-event-maps-to-event';
import { fromEvent, map } from 'rxjs';

export function observeEvent<
  T extends DOMEventSubscriber,
  K extends MapEventMapsToKeys<GetDOMEventMaps<T>>[number] & string
>(
  element: T,
  type: K,
  handler: (
    this: T,
    ev: MapEventMapsToEvent<GetDOMEventMaps<T>, K>[number]
  ) => any
) {
  return fromEvent<MapEventMapsToEvent<GetDOMEventMaps<T>, K>[number]>(
    element,
    type
  ).pipe(map(handler));
}