1.0.0 • Published 5 months ago
@silyze/typed-event-target v1.0.0
Typed Event Target
A strongly-typed EventTarget implementation for TypeScript, enabling type-safe event listening and dispatching.
Installation
npm install @silyze/typed-event-targetUsage
import createEventTarget from "@silyze/typed-event-target";
// Define a custom event
class MyEvent extends Event {
constructor(public detail: { message: string }) {
super("my-event");
}
}
// Create a typed event target for MyEvent and event type "my-event"
const target = createEventTarget<MyEvent, "my-event">();
target.addEventListener("my-event", (event) => {
console.log(event.detail.message);
});
target.dispatchEvent(new MyEvent({ message: "Hello, world!" }));API Reference
createEventTarget<TEvent extends Event, TEventType extends string>(): TypedEventTarget<TEvent, TEventType>
Creates a new typed event target instance.
- Returns:
TypedEventTarget<TEvent, TEventType>
TypedEventTarget<TEvent, TEventType>
Extends the standard EventTarget API with TypeScript type safety.
addEventListener(type: TEventType, listener: TypedEventListenerOrEventListenerObject<TEvent> | null): void
Registers an event listener for the specified event type.
- type: The event type string.
- listener: A callback function or object with a
handleEventmethod.
removeEventListener(type: TEventType, listener: TypedEventListenerOrEventListenerObject<TEvent> | null): void
Removes a previously registered event listener.
- type: The event type string.
- listener: The same listener passed to
addEventListener.
dispatchEvent(event: TEvent): boolean
Dispatches an event to all listeners of its type.
- event: An instance of
TEventwhosetypematchesTEventType. - Returns:
falseifevent.defaultPreventedistrueor if there are no listeners; otherwisetrue.
Types
TypedEventListener<T>:(evt: T) => voidTypedEventListenerObject<T>:{ handleEvent(object: T): void }TypedEventListenerOrEventListenerObject<T>:TypedEventListener<T> | TypedEventListenerObject<T>TypedEventTarget<TEvent, TEventType>: The main interface extendingEventTargetwith typed methods.
Example with Class Listener
import createEventTarget from "@silyze/typed-event-target";
class DataEvent extends Event {
constructor(public data: number[]) {
super("data");
}
}
class DataHandler {
handleEvent(event: DataEvent) {
console.log("Received data:", event.data);
}
}
const dataTarget = createEventTarget<DataEvent, "data">();
const handler = new DataHandler();
dataTarget.addEventListener("data", handler);
dataTarget.dispatchEvent(new DataEvent([1, 2, 3]));
dataTarget.removeEventListener("data", handler);1.0.0
5 months ago