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

Enhancing Vue functionality with vue-class-component and Mixins

Add a hyperlink within a button element

Using Angular, create mat-checkbox components that are dynamically generated and bound using

Loading and unloading an Angular 6 component

Shifting attention to an angular 6 form field

Guide to highlighting manually selected months in the monthpicker by utilizing the DoCheck function in Angular

Encountering issues when verifying the ID of Angular route parameters due to potential null or undefined strings

The subscription function in observables may result in values that are undefined

Guide to Re-rendering a component inside the +layout.svelte

The observable HTTP map appears to be more of a representation rather than a concrete entity

What is the reason for the lack of compatibility between the TypeScript compilerOptions settings 'noEmitOnError: true' and 'isolatedModules: false'?

"React with Typescript - a powerful combination for

Tips on preventing image previews from consuming too much text data while updating a database in Angular 12 using Material UI for image uploads within a FormGroup object

js TouchEvent: When performing a pinch gesture with two fingers and lifting one of them up, how can you determine which finger was lifted?

Creating a Higher Order Component (HOC) for your Next.js page

Error: The type '{ children: Element[]; className: string; }' cannot be assigned to the type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'

Setting values to variables within a component to enable universal access throughout the component in Angular 2

What is the correct way to use forwardRef in a dynamic import in Next.js?

I am having trouble with a property that I believe should be recognized but is not

Leveraging moment.format Function in Angular within an HTML Context