Dynamic event names (+ TypeScript)

[MetRonnie]

Are dynamic event names a good idea?

In my app, a user can create any number of tabs. Each tab needs to listen to an event for when the user switches to it. As I see it this can be done in two different ways:

1. Static event name:

   // emitter.ts
   type Events = {
       'show-tab': number,
       'some-other-event': string,
   }
   export const emitter = mitt<Events>()

   // tab-component.ts
   emitter.on('show-tab', (id) => {
       if (id === this.id) {
           this.doSomething()
       }
   })

   Pros:

   • Can properly define event types

   Cons:

   • Event listened to by all tab components

2. Dynamic event name:

   // emitter.ts
   // Use symbol for static event names
   export const someOtherEvent = Symbol()
   type Events = {
       [someOtherEvent]: string,
       // Use string for dynamic event names
       [name: string]: any,
   }
   export const emitter = mitt<Events>()

   // tab-component.ts
   emitter.on(`show-tab-${this.id}`, () => {
       this.doSomething()
   })

   Pros:

   • Each tab component only listens to its own event

   Cons:

   • No proper event type definition for show-tab events