This course has been updated! We now recommend you take the React and TypeScript, v2 course.
Transcript from the "Template Literals Continued" Lesson
[00:00:00]
>> All right, so our mission here is to create composite types out of these two to make our fictitious component library just a little bit more solid. So we say very much the same move that we pulled last time and then we'll kind of extend it a little bit.
[00:00:16] So here we've got this vertical alignment-horizontal alignment. And we can see that makes a and b happy as we wanted. Let's see, we got actually switched us to alignment, then it will make a and b happy. A and b are happy cuz they still expect strength. A and b are happy, should break is angry cuz left right isn't a thing.
[00:00:46] Should break in first would eventually work cuz the center is not a combination of the vertical and the horizontal. So, yeah, it does break but we might wanna say like, okay, we can make it better. Like what if we wanted center to just, we don't wanna have to do center center?
[00:01:07] That seems a little bit ridiculous. So what we wanna do is we wanna be able to make it so that it will allow for center but not allow for center center. So I'm gonna change this one real quick cuz we want this one to break again. So this one works and this one is currently broken, but we want our API to be center.
[00:01:30] So we'll have top left, top center, top right, and so on, so forth. But center, instead of center center, we just want the word center. So step one, to add center as an approved type just a union. And so now if we look, we've got center, top-center, top-left, we still got that center-center.
[00:01:54] And so how do we pull that out? How do we exclude it? That's kind of the answer, right? Not to put the answer in the question, but could we say, Exclude, and then we wanna take out, Right? So now we have this idea of an alignment that is what we would like to see maybe in the API for our component library.
[00:02:26] Right, we've got center center, left, center, right, top left, top center, so on and so forth. But there is no center center. So you can get, instead of hard coding and a bunch of type Cs. Yeah, nine combinations, not that bad. You could maybe hard coded it in, but you can see how this grows.
[00:02:42] A lot of the programmability though in TypeScript does leave a little bit to be desired. All right, yeah, you could probably make hex codes work, right? You're gonna say six strings of 0 through F. But you can't do like ranges or anything like that. And you can't do like a range of numbers like whether they're RGB values or something like that.
[00:03:10] That wouldn't work because you can't do like, all right, all numbers from 0 to 255. Now could you make a union type that was 0 through 255 and do it like that? Yes, but, yeah, there's one of those what's the line from Jurassic Park? They asked if they could not whether or not they should, right?
[00:03:35] So, yes, you could do that but that's probably taking it a little bit too far. But I think for creating component interfaces that are reusable, these are some powerful tools for just boxing and then putting some constraints on how you intend for a component to be used. We can do a quick refactoring to see how this would look in one of our reducers.
[00:04:01] So let's pull that up. And let's see, like could we use this to create a bunch of our action types? And again, it'll be a little on the small side but enough that I think we can pull it up. So I'm gonna go back, I'll go to code sandbox.
[00:04:19] That looks like the right one. Wait for that to come up. All right, if I go into my reducer, we've got let's go ahead and get rid of everything except for the code. Adjust red, adjust green, adjust blue. Seems like we could use what we just learned here.
[00:04:46] So we could say something like type colors cuz, yeah, maybe this eventually goes on to have HSL and all sorts of other different kinds of colors. So we could say colors are red, green, blue and, The action types, just gonna be adjust. We got to do the template literals here.
[00:05:31] So now we can say that this is simply gonna be for action types. So we get the same basic result. There are a few other little things that we could do here as well. Like we could, for instance, be able to use it both in our JavaScript and figure out our types based on this.
[00:06:02] So could we theoretically have the colors and maybe abstract some of this as well? I think that we could. So we say our colors are red, green, and blue. We're gonna say this should be read only, I don't want this changing. So this becomes a read only array.
[00:06:29] And now we can go ahead and say instead of hard coding these in. We could say. We know in JavaScript, an array is just an object where the keys are numbers. So if we look at colors now, we see it's red, green and blue. They just need to be uppercase.
[00:06:58] It works. I got to put this here as well. No, that should work. Not sure if this is excellent yelling at me or not seems to be happy everywhere else. Yeah, I think that's just a sign being angry with me again. Yeah, excellent doesn't, the excellent built into code sandbox doesn't respect that.
[00:07:31] The template literals exist yet so it works. It's just angry about that for right now. So now I have them in JavaScript so I could even go ahead and just remove this. I could say something along the lines of If the action is a type, I could probably do this programmatically as well.
[00:08:08] Now that I think about it, you could do this to figure out how you wanted to make the colors. You get even more sophisticated with your types. But basically we're using JavaScript to inform our types, which then we can use programmatically as well. Cool, all right, let me stop and take a look at some of these questions in the chat.
[00:08:38] So one of the question is, is there more abstract way? How do I make one of the interrelations optional? Should it be possible to have an alignment that does not have a vertical line making separate optional as well? I don't know of the top of my head. My gut says that you could put one of the turn areas in there and say like, okay.
[00:09:04] Given this case but like even the attorneys basically can check to see if they extend other types. It's not fully like you don't have everything available to you, like there might be visiting attorneys. I'm not sure off the top of my head if you can make any of that optional.
[00:09:21] Again, this is a brand new feature, too. So it's like it'd be interesting someone watching this a year from now be like, yeah, you can totally do those things now. But at this moment, I'm pretty sure it's somewhat limited. But you could theoretically, yeah, have it go back and forth or go back and do the tourney of replaced with an empty string, which would make it shorter.
[00:09:43] But I'm not totally sure where the limitations are. But, yeah, attorneys would be the way that I would look into that.