No overload

[mint mortar]

Greetings all.
I am trying to add an event listener for a custom event named "highlight".
Typescript is complaining.

*"Argument of type '"highlight"' is not assignable to parameter of type 'keyof HTMLElementEventMap'." * <-- I know, that is why I am specifing
(event: CustomEvent) ...

Any help will be much appreciated!

No overload matches this call.
  Overload 1 of 2, '(type: keyof HTMLElementEventMap, listener: (this: HTMLElement, ev: Event | UIEvent | AnimationEvent | MouseEvent | InputEvent | ... 13 more ... | WheelEvent) => any, options?: boolean | ... 1 more ... | undefined): void', gave the following error.
    Argument of type '"highlight"' is not assignable to parameter of type 'keyof HTMLElementEventMap'.
  Overload 2 of 2, '(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void', gave the following error.
    Argument of type '(event: CustomEvent) => void' is not assignable to parameter of type 'EventListenerOrEventListenerObject'.
      Type '(event: CustomEvent) => void' is not assignable to type 'EventListener'.
        Types of parameters 'event' and 'evt' are incompatible.
          Type 'Event' is missing the following properties from type 'CustomEvent<any>': detail, initCustomEventts(2769)

[warm halo]

augment the types:

declare global {
  interface HTMLElementEventMap {
    highlight: CustomEvent<something>;
  }
}

[mint mortar]

Thanks @warm halo that removed the error.

What I dont understand, is why this is needed, since it is a custom event

I appreciate your help

[warm halo]

Because allowing any string would break the autocompletion of existing events
And it's potentially unsafe to assume everything else is a CustomEvent