Identity Functions 5 exercises

Reverse Mapped Types

This one is another mind-bender!

Consider this makeEventHandlers identity function that takes something in and returns the same thing back. It's currently typed as unknown:

export function makeEventHandlers(obj: unknown) {
return obj;

Our goal is to use the `makeEventHan

Loading exercise


0:00 This exercise is a bit of a mind-bender. This makeEventHandlers function, what it's doing is it's just an identity function taking in something and returning the same thing back, but what we're using it for is we're using it for a little bit of a interesting use case.

0:17 We've got a function here called click, and that click is a property on the object that we're passing into makeEventHandlers. What we're trying to do is take that click and automatically infer it into that name slot so that name itself should be click. The same is true for focus here.

0:36 I'm going to give you the name of the piece of syntax that I want you to use. You're going to need to use a mapped type here but it's unusual. It's what's called a reverse mapped type. This technique is not even that documented anywhere but it's inside the compiler as something that it recognizes for this use case. A reverse mapped type.

0:59 You might get lucky if you google online, or maybe in the future some people will document this use case, but this is a tricky one to figure out so don't be ashamed by jumping to the solution. You're definitely going to need a generic on makeEventHandlers. You're definitely going to need to pass that generic into a map type, but yeah, good luck. I'll see how you do with this.