Strict `EventTarget`

[Richienb]

Type description + examples

We would like to have a way to add generics to EventTarget.

const emitter = EventTarget<{
  a: void;
  b: number[];
}>();

means a event with no payload, and b event with number[] payload.

Maybe should actually provide Event object instead as values.

Type source

https://github.com/Richienb/strict-event-target/tree/main

I think it should be some interface extends EventTarget, and we override add/remove - EventListener

TypeScript issue: microsoft/TypeScript#43477

Search existing types and issues first

• I tried my best to look for it

[som-sm]

@Richienb Is the expectation that we should export a type like StrictEventTarget similar to one in your library, strict-event-target?

There's one problem I noticed with your library, refer to the example below:

import type StrictEventTarget from 'strict-event-target';

const target = new (EventTarget as typeof StrictEventTarget<
  {
    foo: string; // Event with data
  },
  [
    'bar', // Event without data
  ]
>)();

target.dispatchEvent(new CustomEvent('foo', { detail: { xyz: { foo: 1 } } })); // Should error, but doesn't

target.dispatchEvent(new Event('bar'));

Playground: https://tsplay.dev/N94V3w

It'd be really nice if detail for a CustomEvent were typed according to the event name, but I'm not sure if that's possible. This is what I came up with:

Updated dispatchEvent to the following:

dispatchEvent(event: Event & { detail?: never }): boolean;
dispatchEvent<Name extends keyof EventsWithData = string>(event: CustomEvent<EventsWithData[Name]>): boolean;

Results:

const target = new EventTarget() as StrictEventTarget<
  {
    foo: string; // Event with data
    baz: number;
  },
  [
    'bar', // Event without data
  ]
>;

// @ts-expect-error
target.dispatchEvent(new CustomEvent('foo', { detail: { xyz: { foo: 1 } } })); // Errors, `detail` should be `string | number`

target.dispatchEvent(new CustomEvent('foo', { detail: 1 })); // Unfortunately, `detail` for `'foo'` could also be a `number`

// @ts-expect-error
target.dispatchEvent<'foo'>(new CustomEvent('foo', { detail: 1 })); // We'd have pass a the event name for stricter typing

target.dispatchEvent<'foo'>(new CustomEvent('foo', { detail: '1' }));

Full example: https://tsplay.dev/mMkjZw

Let me know if this makes sense.

[Richienb]

Is the expectation that we should export a type like StrictEventTarget similar to one in your library, strict-event-target?

That was my attempt some time ago. Yes, it doesn't work that well and could be better.

I think we should use the void type instead of specifying an array as the second generic, so that we can maybe more easily accept generics from higher up about the value.

The idea of typing dispatchEvent is good. It would be better if we could extend CustomEvent to store the event name as a generic, which we could infer later inside dispatchEvent, but that might not be possible, I'm not sure.

[som-sm]

I think we should use the void type instead of specifying an array as the second generic, so that we can maybe more easily accept generics from higher up about the value.

Yeah, I was thinking the same. In the current setup, there's also the possibility of duplicate events, the same event occurring with and without data.

const target = new EventTarget() as StrictEventTarget<
  {
    foo: string; // `foo` event with data
  },
  [
    'foo', // `foo` event without data
  ]
>;

We'd then have to validate that the events are exclusive in nature, so it's better to keep them under one single object. I was thinking of using never (instead of void):

const target = new EventTarget() as StrictEventTarget<
  {
    foo: string; // Event with data
    baz: never; // Event without data
  },
>;

If you want to work on this, feel free to open a PR for the same.

[fregante]

My solution to untyped events has been this: https://github.com/fregante/simple-event-target

Its limitation is that it's a one-event abstraction based on EventTarget