Using Generics with Components 11 exercises
Problem

DRY out Code with Generic Type Helpers

Autocomplete Type Refactoring in TypeScript

In this exercise, we're going to revisit the loose autocomplete type concept we've seen before.

Here, we have a LooseIcon type, which is either an Icon or string and an empty object.

This setup provides us with autocomplete for home, settings

Loading exercise

Transcript

00:00 In this exercise, we're going to revisit something that we've seen before, which is this loose autocomplete type here, where we have a loose icon type, which is the icon or string and empty object. The result of this is that we get autocomplete for about home and settings inside these icons here. The same is true for these button variants too,

00:19 we get primary, secondary, tertiary. So everything's working, everything's all fine, except we want to refactor this so that it's a little bit more dry, and so it's a little bit more obvious what's happening, because someone stumbling upon this code might look at this and go, what on earth is happening here? This looks terrifying to me.

00:37 So ideally, we would find a way to extract out this logic into some type function. I'm going to link some resources below on type helpers, because this is the primary thing we're looking at here. What I'd like you to do is I'd like you to wrap icon and button variants in a new type helper,

00:59 define that type helper, and use it to sort of capture this behavior inside it. So there we go. I've given you, I think, enough for you to get started, and make sure you dive into the TypeScript docs for this, and check out generics and generic types. Good luck.