Generics in a Class Names Creator
Consider this createClassNamesFactory function that's similar to one I built for getting Tailwind class names that could then be passed into a React component:
const createClassNamesFactory = (classes: unknown) => (type: unknown, ...otherClasses: unknown[]) => { const classL
Transcript
0:00 In this exercise, we have a createClassNamesFactory function. This is taken from an example of when I was using Tailwind. I love Tailwind, by the way. It's a brilliant, brilliant library.
0:12 What I wanted to do was create a function which let me basically get some class names by a variant. What I wanted to do was be able to call getBg primary and then return me some class names which I could pass into my React component.
0:29 This is a very, very common thing if you're working with a library that uses a lot of class names and you want to stack them in various configurations.
0:38 What we want to do is be able to pass in a record of strings into our classNames factory. From that, we want to infer the type here so that we can be able to pass in different variants and have that be type-safe.
0:52 We shouldn't be able to pass in stuff that isn't in our object here. We shouldn't be able to pass invalid stuff to classNames factory that it can't work out.
1:04 One final thing, too, is that you should be able to pass excess classes to this, so otherClasses unknown. Where are they. For instance, getBg, you should be able to pass text-white, rounded, p-4, as many of those as you want to as well, and it should concatenate them together.
1:23 All of the implementation is working. There's a couple of errors here, but your job is to figure out what shape the generics should be and where they should live. Good luck.
