Typed Event Target

A strongly-typed EventTarget implementation for TypeScript, enabling type-safe event listening and dispatching.

Installation

npm install @silyze/typed-event-target

Usage

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 handleEvent method.

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 TEvent whose type matches TEventType.
• Returns: false if event.defaultPrevented is true or if there are no listeners; otherwise true.

Types

• TypedEventListener<T>: (evt: T) => void
• TypedEventListenerObject<T>: { handleEvent(object: T): void }
• TypedEventListenerOrEventListenerObject<T>: TypedEventListener<T> | TypedEventListenerObject<T>
• TypedEventTarget<TEvent, TEventType>: The main interface extending EventTarget with 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);