Challenges 7 exercises

Create a Function with a Dynamic Number of Arguments

Here is an Events interface:

interface Events {
click: {
x: number;
y: number;
focus: undefined;

This sendEvent function takes in an event of either click or focus as well as a set of arguments:

export const sendEvent = (event: keyof Events, ...args:

Loading exercise


0:00 In this exercise, we're going to be creating a function with a dynamic number of arguments. This sendEvent function here basically takes in an event and then takes in a set of arguments.

0:11 Currently, what we're trying to get it to do is we've got this sendEvent and we want it to accept either click or focus which is working, so that's good. When we accept click, we want to force it to basically force you to pass in this extra argument which corresponds to the shape of this up here.

0:30 If it doesn't have an extra argument, if it's undefined, we don't want to force the user to go undefined here. We actually want to make them not have to pass that second argument. There which should force us not to pass an argument there.

0:44 This is a tricky one because we definitely need a generic in here because we're going to need to capture the result of event. Then we're going to probably need a conditional type, I think, in order to capture the result of, basically, capture the payload and work out how to put it inside the args.

1:04 These args need to either be, they need to be a certain length based on whether this has a payload or not because ideally the args would be an empty array if there's no payload, and they'd be an array with one member if there is a payload.

1:21 That should give you a sense of what we're trying to achieve. I think I might have given the game away a little bit there, but I'm going to leave that in. Good luck with this challenge. This is actually a really, really useful pattern. I've used this in a bunch of places. Good luck.