Using Generics with Components 11 exercises

Refactoring to a Type Helper

Type Helpers are a vital concept to understand when we get to more advanced topics later on, so let's work on another example.

In a previous exercise we looked at an "all or nothing" idea where we had InputProps that had two different branches. One branch had value and onChange and the other

Loading exercise


00:00 I want to really hammer in this idea of these type helpers because it's such a crucial idea for understanding the latest stuff that we're going to cover like generic functions, generic classes and things.

00:09 So we are going to go back to another previous exercise that we had, which was this all or nothing idea, where if you have these input props and you have value string on change change handler, then you need to have another branch in there which covers the other side of it.

00:25 So value is an optional property with undefined on it as is on change undefined too. And this means then that when you add in value down here, you're going to be prompted to add on change. So this logic is a little bit hard to read as well. We have to wrap this stuff in a parentheses.

00:43 We have to kind of manually specify all of this. I think there is going to be a much neater way to actually get this across and capture it in a reusable type.

00:54 So that's your job is to try to refactor this while keeping all of the tests intact so that we lose some of this sort of terrible syntax here and we capture it in a type helper that makes more sense.

01:05 You're going to need, I think, a couple of type helpers from TypeScript itself because you're going to need to actually do a little bit of transformation here. You're going to need to take in this as this T and then return something that looks like that, except all of its properties are going to be undefined. So that's your job.

01:25 Good luck.