typed-event-target

This package provides a strongly typed EventTarget sub class. Provided types pass down to event listeners and place requirements on event dispatching.

Usage

npm i typed-event-target

TypedEventTarget

Extend TypedEventTarget to create your own event target with specific types, or just use it to add types to an existing event target.

import {TypedEventTarget} from 'typed-event-target';
import {MyEvent1, MyEvent2} from './typed-events.example';

export class MyTypedEventTarget extends TypedEventTarget<MyEvent1 | MyEvent2> {}

import {TypedEventTarget} from 'typed-event-target';
import {MyEvent1, MyEvent2} from './typed-events.example';

export const nowWithTypes = new EventTarget() as TypedEventTarget<MyEvent1 | MyEvent2>;

In the end, nowWithTypes will be functionally equivalent to any new instance of MyEventTarget (new MyEventTarget()) because MyEventTarget is a sub-class of EventTarget with nothing extra but type information. (Though of course, nowWithTypes won't be an instance of MyEventTarget because MyEventTarget is a separate run-time class.)

Instances of TypedEventTarget can be used just like any instance of EventTarget:

import {MyTypedEventTarget} from './my-event-target.example';
import {MyEvent1} from './typed-events.example';

const myInstance = new MyTypedEventTarget();

myInstance.addEventListener('my-event-type-1', (event) => {
    console.log(event);
});
myInstance.dispatchEvent(new MyEvent1());
myInstance.removeEventListener('my-event-type-2', () => {});

Typed Events

You are free to add the type property information to your Event sub-classes (for passing into TypedEventTarget's generic) however you wish, but this package provides an easy way to do so with defineTypedEvent:

import {defineTypedEvent} from 'typed-event-target';

export class MyEvent1 extends defineTypedEvent('my-event-type-1') {}
export class MyEvent2 extends defineTypedEvent('my-event-type-2') {}

Typed Custom Events

Typed custom events are also provided, so you can add type guards to the data included in your events. Note the extra () call after defineTypedCustomEvent. This is needed so you don't have to duplicate the Event type information as a function generic.

import {defineTypedCustomEvent} from 'typed-event-target';

export class MyEvent1 extends defineTypedCustomEvent<string>()('my-event-type-1') {}
export class MyEvent2 extends defineTypedCustomEvent<number>()('my-event-type-2') {}

new MyEvent1({detail: 'five'});
new MyEvent2({detail: 5});