Class TypedEventTarget<M>

Used to add type safety to event listeners on a class that extends EventTarget. See the example below for additional details.

Example

// Create an "event map" with the key equal to the name of the
// dispatched event and the value equal to the event type:
type MyTypedEventMap = {
  "open": CustomEvent<string>;
  "close": CustomEvent<string>;
}

// Then, extend `TypedEventTarget` and pass in the event map type
// to the generic:
export class MyClass extends TypedEventTarget<MyTypedEventMap> {
  public dispatchOpen(): void {
    this.dispatchEvent("open", { detail: "Hello!" });
  }

  public dispatchClose(): void {
    this.dispatchEvent("close", { detail: "Goodbye!" });
  }
}

// When you create an instance of the class, you get autocomplete/type
// safety in event listeners:
const myInstance = new MyClass();

myInstance.addEventListener("open", (event) => {
  console.log(event.detail); // <- "Hello!"
});

myInstance.addEventListener("close", (event) => {
  console.log(event.detail); // <- "Goodbye!"

  // This is a type error, this was typed as a string in MyTypedEventMap!
  const someNumber: number = event.detail;
});

// This is a type error, the event doesn't exist in MyTypedEventMap!
myInstance.addEventListener("yeet", (event) => {
  // ...
});

myInstance.dispatchOpen();

Type Parameters

  • M extends Record<string, Event | CustomEvent>

    A map of event types to their respective event classes.

Hierarchy

  • EventTarget
    • TypedEventTarget

Methods

addEventListener dispatchEvent dispatchTypedEvent removeEventListener

Methods

addEventListener

  • addEventListener<T extends string>(
        type: T,
        callback: null | TypedEventListenerOrEventListenerObject<M, T>,
        options?: boolean | AddEventListenerOptions,
    ): void

  • Appends an event listener for events whose type attribute value is type. The callback argument sets the callback that will be invoked when the event is dispatched.

    The options argument sets listener-specific options. For compatibility this can be a boolean, in which case the method behaves exactly as if the value was specified as options.capture.

    When set to true, options.capture prevents callback from being invoked when the event's eventPhase attribute value is BUBBLING_PHASE. When false (or not present), callback will not be invoked when event's eventPhase attribute value is CAPTURING_PHASE. Either way, callback will be invoked if event's eventPhase attribute value is AT_TARGET.

    When set to true, options.passive indicates that the callback will not cancel the event by invoking preventDefault(). This is used to enable performance optimizations described in § 2.8 Observing event listeners.

    When set to true, options.once indicates that the callback will only be invoked once after which the event listener will be removed.

    The event listener is appended to target's event listener list and is not appended if it has the same type, callback, and capture.

    Type Parameters

    • T extends string

      Event type to add event listener for.

    Parameters

    • type: T

      Name of the event to associated with listener.

    • callback: null | TypedEventListenerOrEventListenerObject<M, T>

      Callback to fire with the event fires.

    • Optionaloptions: boolean | AddEventListenerOptions

      Options for creating the event listener.

    Returns void

dispatchEvent

  • dispatchEvent<T extends string | number | symbol>(event: M[T]): boolean

  • Dispatches a synthetic event to the target and returns true if either event's cancelable attribute value is false or its preventDefault() method was not invoked, and false otherwise.

    Type Parameters

    • T extends string | number | symbol

      Type of event to dispatch.

    Parameters

    • event: M[T]

    Returns boolean

    Deprecated

    To ensure type safety use dispatchTypedEvent instead.

dispatchTypedEvent

  • dispatchTypedEvent<T extends string | number | symbol>(
        type: T,
        event: M[T],
    ): boolean

  • Dispatches a synthetic event to target and returns true if either event's cancelable attribute value is false or its preventDefault() method was not invoked, and false otherwise.

    Type Parameters

    • T extends string | number | symbol

      Event type to dispatch.

    Parameters

    • type: T

      Type of the event (i.e. key from the event map).

    • event: M[T]

      Event or CustomEvent to dispatch.

    Returns boolean

removeEventListener

  • removeEventListener<T extends string>(
        type: T,
        callback: null | TypedEventListenerOrEventListenerObject<M, T>,
        options?: boolean | AddEventListenerOptions,
    ): void

  • Removes the event listener in target's event listener list with the same type, callback, and options.

    Type Parameters

    • T extends string

      Event type to add event listener for.

    Parameters

    Returns void

Settings

Member Visibility

On This Page

Methods