Assign function signature to type in TypeScript

Question

Let's say I have a function:

function registerEvent(event: Event, handler: HandlerSignature);

and these are the respective types:

enum Event {
  EventOne,
  EventTwo
}

type HandlerSignature = (...args: any[]) => void;

Now every event could have a different function signature, for example:

function handler1(foo: number, bar: string);
function handler2(foo: string);

What I'd like to achieve is that I can call the registerEvent function, specify the first arg (event) and let TypeScript detect which signature corresponds with this event, i.e. for intellisense and to prevent users from assigning wrong signatures to an event.

I thought about creating a map where I assign the different signatures to the enum values, but I can't really use that as type, can I? Even if I used a mapped type I'd have to create a variable to assign all the events.

T.J. Crowder · Accepted Answer · 2021-11-01 11:45:07Z

7

I'd lean toward function overloading:

enum Events {
  EventOne,
  EventTwo
}

type HandlerSignature = (...args: any[]) => void;

function registerEvent(event: Events.EventOne, handler: (foo: number, bar: string) => void): void;
function registerEvent(event: Events.EventTwo, handler: (foo: number) => void): void;
function registerEvent(event: Events, handler: HandlerSignature):void {
    // ...implementation
}

function handler1(foo: number, bar: string) {}
function handler2(foo: string) {}

registerEvent(Events.EventOne, handler1); // Works
registerEvent(Events.EventOne, handler2); // Error as desired, wrong type for callback

Playground link

(Note I changed Event to Events; Event is a pre-existing global and type in the browser environment and Node.js)

answered Nov 1, 2021 at 11:45

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Blade Over a year ago

Thank you so much! This is a very elegant approach, I didn't even know that overloading works like this.

T.J. Crowder Over a year ago

@Blade - My pleasure. I should note that it only works this way when the event is a constant value. If you had a variable of type Events, then of course TypeScript doesn't know what specific value it will have at runtime so it'll expect a handler that can handle either call.

Collectives™ on Stack Overflow

Assign function signature to type in TypeScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related