Tips on narrowing down the type of callback event depending on the specific event name

Question

Tips on narrowing down the type of callback event depending on the specific event name

I've been working on implementing an event emitter, and the code is pretty straightforward.

Currently, tsc is flagging the event type in eventHandler as 'ErrorEvent' | 'MessageEvent'. This seems to be causing some confusion, and I'm looking for a way to get tsc to narrow down the types correctly based on the eventName passed to the on function.

Is there a solution to this issue?

Here are the Definitions:

interface Event {
  code: string;
}

interface ErrorEvent extends Event {
  xxx: number;
}

interface MessageEvent extends Event {
  yyy: number;
}

interface Events {
  error: ErrorEvent,
  message: MessageEvent
}

type EventHandler = (event: Events[keyof Events]) => void;

Here's the TS CODE:

function on (eventName: keyof Events, eventHandler: EventHandler) {
  console.log(eventName)
}

on('message', (event) => { // ErrorEvent | MessageEvent
  console.log(event)
  console.log(event.code)
  console.log(event.xxx) // Property 'xxx' does not exist on type 'ErrorEvent | MessageEvent'.
  console.log(event.yyy) // Property 'yyy' does not exist on type 'ErrorEvent | MessageEvent'.
})

typescript events callback

Answer 1

Answer №1

To start, eliminate the EventHandler as a union type:

type EventHandler<K extends EventKeys> = (event: Events[K]) => void

By doing this, you will have a specific type for each concrete K. Next step is to ensure that the second argument type of the on function relies on the first. Therefore, you need to add a type parameter to your function in order to align the types:

function on <K extends EventKeys>(eventName: K, eventHandler: EventHandler<K>): void {}

This should work as intended:

interface Event {
  code: string;
}

interface ErrorEvent extends Event {
  xxx: number;
}

interface MessageEvent extends Event {
  yyy: number;
}

interface Events {
  error: ErrorEvent,
  message: MessageEvent
}

type EventKeys = keyof Events
type EventHandler<K extends EventKeys> = (event: Events[K]) => void;

function on <K extends EventKeys>(eventName: K, eventHandler: EventHandler<K>): void {
  console.log(eventName)
}

on('message', (event) => {
  console.log(event)
  console.log(event.code)
  console.log(event.xxx) //  Property 'xxx' does not exist on type 'MessageEvent<any>'.
  console.log(event.yyy)
})

TS playground

Answer 2

To start, eliminate the EventHandler as a union type:

type EventHandler<K extends EventKeys> = (event: Events[K]) => void

By doing this, you will have a specific type for each concrete K. Next step is to ensure that the second argument type of the on function relies on the first. Therefore, you need to add a type parameter to your function in order to align the types:

function on <K extends EventKeys>(eventName: K, eventHandler: EventHandler<K>): void {}

This should work as intended:

interface Event {
  code: string;
}

interface ErrorEvent extends Event {
  xxx: number;
}

interface MessageEvent extends Event {
  yyy: number;
}

interface Events {
  error: ErrorEvent,
  message: MessageEvent
}

type EventKeys = keyof Events
type EventHandler<K extends EventKeys> = (event: Events[K]) => void;

function on <K extends EventKeys>(eventName: K, eventHandler: EventHandler<K>): void {
  console.log(eventName)
}

on('message', (event) => {
  console.log(event)
  console.log(event.code)
  console.log(event.xxx) //  Property 'xxx' does not exist on type 'MessageEvent<any>'.
  console.log(event.yyy)
})

TS playground

Tips on narrowing down the type of callback event depending on the specific event name

Answer №1

Similar questions

Looking to retrieve the value of an input element within an ng-select in Angular 6?

A guide to using Angular to emphasize text based on specific conditions met

The type 'Observable<void | AuthError>' cannot be assigned to 'Observable<Action>'

Navigate to the parent element in the DOM

TSX is throwing an error: "No matching overload found for this call."

The function is not specified

Is TypeScript failing to enforce generic constraints?

Frequent occurrence when a variable is utilized prior to being assigned

The form will not appear if there is no data bound to it

Uncovering the origins of computed object keys in TypeScript

What is the best way to merge two interfaces and convert all of their fields to optional properties?

Retrieve the accurate file name and line number from the stack: Error object in a JavaScript React Typescript application

Customizing event typings for OpenTok in Typescript

TypeScript encountered an unexpected { token, causing a SyntaxError

Using Redis for caching in Node.js applications

Implementing binding of JSON API responses to dropdown menus in Angular 4

Zero-length in Nightmare.js screenshot buffer: an eerie sight

Is it possible to conditionally trigger useLazyQuery in RTK Query?

Leverage the TypeScript compiler's output from a .NET library within a Blazor application by referencing it

Attention: WARNING regarding the NEXTAUTH_URL in the Development Console