CODEWITHSUNDEEP
javascripttypescripteventemitter
Alex
Alex

Reputation: 67248

How to make event emitter work with typescript?

Is there any way to have types for callback arguments, instead of any's ?

type Listener = {
  callback: (...data: any[]) => void,
  once: boolean;
}

class EventEmitter{

  eventMap: Map<string, Listener[]> = new Map();


  on(event: string, callback: Listener["callback"], once: boolean = false) {
    const listeners = this.eventMap.get(event) ?? [];
    listeners.push({ callback, once });
    this.eventMap.set(event, listeners);
    return this;
  }

  once(event: string, callback: Listener['callback']): this {
    this.on(event, callback, true);
    return this;
  }

  emit(event: string, ...data: any[]) {
    const listeners = this.eventMap.get(event) ?? [];

    for (let i = 0; i < listeners.length; i++) {
      const { callback, once } = listeners[i];

      callback(...data);
      if (once) {
        listeners.splice(i, 1);
        this.eventMap.set(event, listeners);
      }
    }
  }
}

Emit has to accept any, because it's the entry point. Say I call this:

events.emit("x", 1, true); 
events.emit("y", "test");

I want the callbacks hooked on x to see the actual types, like:

events.on("x", (arg1, arg2) => { // <= args should have types number and bool

and

events.on("y", (arg1) => { // <= args should have type string

Upvotes: 0

Views: 42

Answers (1)

Artak Matiniani
Artak Matiniani

Reputation: 89

you can use a generic event map to provide type-safe callback arguments; for example, define an interface for your events and then type your emitter class based on it:

interface EventMap {
    x: [number, boolean];
    y: [string];
    // add more events and their argument types here
}

type Listener<T extends any[] = any[]> = {
    callback: (...data: T) => void;
    once: boolean;
};

class EventEmitter<Events extends Record<string, any[]>> {
    private eventMap: Map<keyof Events, Listener<any[]>[]> = new Map();

    on<K extends keyof Events>(
        event: K,
        callback: (...args: Events[K]) => void,
        once: boolean = false
    ): this {
        const listeners = this.eventMap.get(event) ?? [];
        listeners.push({ callback, once });
        this.eventMap.set(event, listeners);
        return this;
    }

    once<K extends keyof Events>(
        event: K,
        callback: (...args: Events[K]) => void
    ): this {
        return this.on(event, callback, true);
    }

    emit<K extends keyof Events>(event: K, ...data: Events[K]): void {
        const listeners = this.eventMap.get(event) ?? [];
        for (let i = 0; i < listeners.length; i++) {
            const { callback, once } = listeners[i];
            callback(...data);
            if (once) {
                listeners.splice(i, 1);
                i--; // adjust index after removal
                this.eventMap.set(event, listeners);
            }
        }
    }
}

// Usage
const emitter = new EventEmitter<EventMap>();

// Callback will have types: (arg1: number, arg2: boolean) => void
emitter.on("x", (arg1, arg2) => {
    console.log(arg1, arg2);
});

// Callback will have type: (arg1: string) => void
emitter.on("y", (arg1) => {
    console.log(arg1);
});

emitter.emit("x", 1, true);
emitter.emit("y", "test");

this approach ties each event key to a specific tuple of argument types, thusallowing callback parameters to be type-checked while keeping the emit interface flexible.

Upvotes: 3

Related Questions