Advanced Generics 9 exercises
Problem

Refactoring Generics for a Cleaner API

In this exercise we're going to refactor some generics to make the API cleaner.

We have a useStyled function which takes in a TTheme that defaults to an empty object, as well as a function which takes in the theme and then returns CSSProperties:


const useStyled = <TTheme = {}>(func:

Loading exercise

Transcript

0:00 In this exercise, we're going to be refactoring some generics to make the API a little bit cleaner.

0:07 We have a useStyled function, which basically takes in a TTheme which is defaulting to an empty object and takes in a function which takes in the theme and then returns some CSSProperties, and then returns some CSSProperties like hooks into a global theme, and you get the idea.

0:24 This is basically used for when you want to white label an API and let's say you want to use CSSProperties like this for instance. I've used something like this in a React Native app before. We have an interface MyTheme, but the issue here is that we're having to pass in MyTheme into useStyled every time we use it.

0:43 If you just remove that, then actually theme gets typed as nothing here or an empty object, which is not particularly great. It would be so good since useStyled is hooking into a global theme really if we could have an API where we didn't have to pass in this type argument every time.

1:02 The desired API looks something like this. We're going to say const useStyled equals makeUseStyled, and when we call makeUseStyled, we're going to pass in MyTheme just there. This is a refactor. See if you can get this working.

1:18 You should be getting errors down here when you make the refactor, and you should be able to basically have it like this and just be able to call useStyled and have the theme inferred from where you've basically made the useStyled here. We're turning this into a factory. Good luck.