typed-event-target v3.4.0
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});
15 days ago
21 days ago
1 month ago
2 months ago
2 months ago
2 months ago
4 months ago
4 months ago
4 months ago
6 months ago
6 months ago
8 months ago
9 months ago
10 months ago
10 months ago
11 months ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago