Some ideas and possible issue with enforcing correctly dispatched string key

[Glidias]

You can create 2 versions of these, one with arbituary string keys (scroll below to bottom, just enforce a singly typed event) and the other requiring specific string keys (the current version you are using).

Also, for the one with specific string keys, is there a way to use regular dispatchEvent instead of deprecrating it in favour of dispatchedTypeEvent?? I guess that is not possible because the native JAvascript Event enforces arbituary string types internally hmmm...

Possible issue, regarding https://github.com/DerZade/typescript-event-target#dispatching-events, you can't enforce specific string keys for events that are being dispatched though...

const eventTarget = new TypedKeyEventTarget<{"time":MouseEvent}>();
eventTarget.dispatchTypedEvent(
    'time',
    new MouseEvent('doesnt match above if mispelled will not work')
);

Typically, most enforced string keys are found as static constants within the class itself as a lookup to avoid typos, but compiler wise it wil still accept rather than reject.

// Typed KeyEventTarget version

export type TypedEventListener<M, T extends keyof M> = (
    evt: M[T]
) => void | Promise<void>;

export interface TypedEventListenerObject<M, T extends keyof M> {
    handleEvent: (evt: M[T]) => void | Promise<void>;
}

export type TypedEventListenerOrEventListenerObject<M, T extends keyof M> =
    | TypedEventListener<M, T>
    | TypedEventListenerObject<M, T>;

type ValueIsEvent<T> = {
    [key in keyof T]: Event;
};


export interface TypedKeyEventTarget<M extends ValueIsEvent<M>> {
    /** Appends an event listener for events whose type attribute value is type.
     * The callback argument sets the callback that will be invoked when the event
     * is dispatched.
     *
     * The options argument sets listener-specific options. For compatibility this
     * can be a boolean, in which case the method behaves exactly as if the value
     * was specified as options's capture.
     *
     * When set to true, options's capture prevents callback from being invoked
     * when the event's eventPhase attribute value is BUBBLING_PHASE. When false
     * (or not present), callback will not be invoked when event's eventPhase
     * attribute value is CAPTURING_PHASE. Either way, callback will be invoked if
     * event's eventPhase attribute value is AT_TARGET.
     *
     * When set to true, options's passive indicates that the callback will not
     * cancel the event by invoking preventDefault(). This is used to enable
     * performance optimizations described in § 2.8 Observing event listeners.
     *
     * When set to true, options's once indicates that the callback will only be
     * invoked once after which the event listener will be removed.
     *
     * The event listener is appended to target's event listener list and is not
     * appended if it has the same type, callback, and capture. */
    addEventListener: <T extends keyof M & string>(
        type: string,
        listener: TypedEventListenerOrEventListenerObject<M, T> | null,
        options?: boolean | AddEventListenerOptions
    ) => void;

    /** Removes the event listener in target's event listener list with the same
     * type, callback, and options. */
    removeEventListener: <T extends keyof M & string>(
        type: T,
        callback: TypedEventListenerOrEventListenerObject<M, T> | null,
        options?: EventListenerOptions | boolean
    ) => void;

    /**
     * Dispatches a synthetic event event to target and returns true if either
     * event's cancelable attribute value is false or its preventDefault() method
     * was not invoked, and false otherwise.
     * @deprecated To ensure type safety use `dispatchTypedEvent` instead.
     */
    dispatchEvent: (event: Event) => boolean;
}

export class TypedKeyEventTarget<M extends ValueIsEvent<M>> extends EventTarget {
    /**
     * Dispatches a synthetic event event to target and returns true if either
     * event's cancelable attribute value is false or its preventDefault() method
     * was not invoked, and false otherwise.
     */
    public dispatchTypedEvent<T extends keyof M>(
        _type: T,
        event: M[T]
    ): boolean {
        return super.dispatchEvent(event);
    }
}

// Typed event version (Partial M) (with arbituary string keys)

interface MEventListener<M extends Event> {
    (evt: M): void;
}

interface MEventListenerObject<M extends Event> {
    handleEvent(object: M): void;
}

export interface TypedEventTarget<_M extends Event> {
    /** Appends an event listener for events whose type attribute value is type.
     * The callback argument sets the callback that will be invoked when the event
     * is dispatched.
     *
     * The options argument sets listener-specific options. For compatibility this
     * can be a boolean, in which case the method behaves exactly as if the value
     * was specified as options's capture.
     *
     * When set to true, options's capture prevents callback from being invoked
     * when the event's eventPhase attribute value is BUBBLING_PHASE. When false
     * (or not present), callback will not be invoked when event's eventPhase
     * attribute value is CAPTURING_PHASE. Either way, callback will be invoked if
     * event's eventPhase attribute value is AT_TARGET.
     *
     * When set to true, options's passive indicates that the callback will not
     * cancel the event by invoking preventDefault(). This is used to enable
     * performance optimizations described in § 2.8 Observing event listeners.
     *
     * When set to true, options's once indicates that the callback will only be
     * invoked once after which the event listener will be removed.
     *
     * The event listener is appended to target's event listener list and is not
     * appended if it has the same type, callback, and capture. */
    addEventListener: (
        type: string,
        listener: MEventListener<_M> | MEventListenerObject<_M> | null,
        options?: boolean | AddEventListenerOptions
    ) => void;

    /** Removes the event listener in target's event listener list with the same
     * type, callback, and options. */
    removeEventListener: (
        type: string,
        callback: MEventListener<_M> | MEventListenerObject<_M> | null,
        options?: EventListenerOptions | boolean
    ) => void;

    /**
     * Dispatches a synthetic event event to target and returns true if either
     * event's cancelable attribute value is false or its preventDefault() method
     * was not invoked, and false otherwise.
     */
    dispatchEvent: (event: _M) => boolean
}

export class TypedEventTarget<_M> extends EventTarget {}

[DerZade]

Also, for the one with specific string keys, is there a way to use regular dispatchEvent instead of deprecrating it in favour of dispatchedTypeEvent?? I guess that is not possible because the native JAvascript Event enforces arbituary string types internally hmmm...

I just opted to add a new function (dispatchTypedEvent) instead of overwriting the existing function (dispatchEvent) to make sure a TypedEventTarget works as a drop-in replacement. This was one of the main requirements I set myself when creating this package. So a user just has to change the type (from EventTarget to TypedEventTarget<...>), but nothing else in the code for it to work.

To make this as clear as possible: You CAN use dispatchEvent. It works 100% like the original. It is just marked as deprecated, so your code editor might add a strike-though to remind you that there is a better alternative (dispatchTypedEvent).
Knowing this, do you still think two different version would be necessary?

---

Possible issue, regarding https://github.com/DerZade/typescript-event-target#dispatching-events, you can't enforce specific string keys for events that are being dispatched though...

const eventTarget = new TypedKeyEventTarget<{"time":MouseEvent}>();
eventTarget.dispatchTypedEvent(
    'time',
    new MouseEvent('doesnt match above if mispelled will not work')
);

Typically, most enforced string keys are found as static constants within the class itself as a lookup to avoid typos, but compiler wise it wil still accept rather than reject.

I also ran into the issue of misspelled types in events when using dispatchTypedEvent.
I have considered adding a check to see if the type of the event matches the type passed, and if not, throw an error:

    public dispatchTypedEvent<T extends keyof M>(
-       _type: T,
+       type: T,
        event: M[T]
    ): boolean {
+       if (event.type !== type) throw new Error(`Event has type "${event.type}", but type "{type}" was passed.`);
        return super.dispatchEvent(event);
    }

I haven't done this yet because of three reaons:

1. I was unsure if triggering an error wasn't too aggressive. Maybe a console.warn would suffice, but that would mean that in the worst case a user would have the warning in production because they did not check the console. But actually, it is more of an error than a warning, so all in all I was just unsure. 😅
2. This would be an breaking change (at least when throwing an error), since the code would behave differently, so it would require a major version bump
3. Such a change would increase the bundle size. Probably a little less than 100 bytes (uncompressed), which may not seem much at first glance, but in relation to the current bundle size it is an increase of around 16%.

Imho reason 2 and 3 aren't really that big of a deal, they just added to the inconvenience at the time and therefore contributed in me deciding not to implement it. Now that you've brought it to my attention again, I'll have to think about it. What's your opinion on this? Do you think a solution like above would "fix" your issue? If so, do you think it should be a hard error or would you opt for a console message?

[Glidias]

Ideally could see if some tslinting feature could be done or something, not sure if it would be possible so checking can be done at compile time .. however I doubt this is possible given the dynamic nature of unknown Event instances , unless some strict conventions are used for defining static strings within the event class itself to determine valid event names.

The other enforced convention could be requiring event classes to have always have type parameter as first parameter in constructor ( assume so) that could facilitate type checking at compile time.. however, this works off an assumption that might be untrue as there's no guarantee everyone else will follow this convention to assign the type to the event superclass.

[DerZade]

Ideally could see if some tslinting feature could be done or something, not sure if it would be possible so checking can be done at compile time .. however I doubt this is possible given the dynamic nature of unknown Event instances , unless some strict conventions are used for defining static strings within the event class itself to determine valid event names.

The other enforced convention could be requiring event classes to have always have type parameter as first parameter in constructor ( assume so) that could facilitate type checking at compile time.. however, this works off an assumption that might be untrue as there's no guarantee everyone else will follow this convention to assign the type to the event superclass.

Yeah I can't really see how we could make these types of checks at compile time, without jeopardizing compatibility, which is a no-go with this library 🙈

Best I can do is, how I described in my previous answer. Do you think that is a solution you could live with / would improve the library?