TypeScript TypedEventTarget

event-target.ts

/**
 * Implements the EventTarget, but with type safety.
 *
 * Extend this class with an object that describes your events like this:
 *
 *     type AccountEvents = {
 *       logout: null
 *       'sign-in': { username: string; password: string }
 *     }
 *     class Account extends TypedEventTarget<AccountEvents> {
 *       // Your class implementationt
 *     }
 *     
 *     const user = new Account()
 *     
 *     // Both the event `sign-in` and the `event.detail` object are typed and auto-
 *     // completed now.
 *     user.addEventListener('sign-in', event => {
 *       event.detail.username
 *     })
 */
export class TypedEventTarget<
  EventDef extends { [key: string]: unknown },
> extends EventTarget {
  public dispatch<
    T extends Extract<keyof EventDef, string>,
    E extends EventDef[T],
  >(type: T, e: E): boolean {
    const event = new CustomEvent(type, { detail: e })
    return super.dispatchEvent(event)
  }

  public override addEventListener<
    T extends Extract<keyof EventDef, string>,
    E extends CustomEvent<EventDef[T]>,
  >(
    type: T,
    listener:
      | ((e: E) => void)
      | {
          handleEvent(object: E): void
        }
      | null,
  ) {
    super.addEventListener(type, listener as EventListenerOrEventListenerObject)
  }

  public override removeEventListener(type: Extract<keyof EventDef, string>) {
    super.removeEventListener(type, null)
  }
}