Check out a free preview of the full React and TypeScript course:
The "Template Literals" Lesson is part of the full, React and TypeScript course featured in this preview video. Here's what you'd learn in this lesson:

Steve discusses the new feature in TypeScript 4.2 of using template literals with types. Using template literals will allow TypeScript to generate all of the composite types without having to individually define them. A challenge exercise of creating an alignment type using template literals is also provided in this segment.

Get Unlimited Access Now

Transcript from the "Template Literals" Lesson

[00:00:00]
>> I was talking about a little bit about a brand new feature in typescript 4.2. And I mentioned that it's a new feature because type 2.4 was the most recent version you see in at the star ship play ground running to 4.23. And am gonna go jump into my cool bass tomorrow and do this, the problem that you might have is that if you're running an older version of TypeScript, this is not supported.

[00:00:27] But in the current version, this is another really, really great way to take common things that you might deal with and do it a little more cleanly. So, in JavaScript, we have template literal, which are the ability to do like string interpolation. Into a given string and what type template literals allow you to do is do something like that with your types.

[00:00:52] So, right now we have an alignment which is a string. I also want to spell it right? We have an alignment that's a string, right? But we don't want to just have a any given string here, we wanna say that it's got to be one of the somewhere in the law in chaos spectrum and somewhere on the good and evil spectrum.

[00:01:18] So we only wanna have chaotic good, lawful, good, true neutral, so on and so forth, neutral, neutral, lawful evil. We don't want to let them put any string in there. That's slightly problematic. An interesting way to do this is again, we can do like type alignment. Again, this works in the most recent version of TypeScript.

[00:01:39] And we can say that we wanna have low chaos dash good, evil, right? And now if you look this went ahead and made all of the composite types out of those two pieces. So now we've got lawful neutral, lawful good, lawful evil, neutral, neutral, neutral good, neutral evil, chaotic neutral, so on and so forth.

[00:02:07] And this is you know, now I can switch this with alignment And if I misspell part of it It's not gonna work. If I do things that aren't okay, it's still not gonna work it adds additional safety. All right, so this is, cool. What might this look like?

[00:02:30] This we can become particularly interesting if you're building a component library. So if you go to the page, we can see there's a your turn here. I'll bring this in. A more apropos version for a react component, is a different kind of alignment instead of good or evil, maybe top Center and bottom left Center and right.

[00:02:57] So we maybe wanna have a box component or a card component or something. We wanna be very specific about the different combinations that you could use. So instead of allowing a string, we want top center to work. We want bottom, right to work. My challenge to you, kind of check it out the sandbox up here, is left right should not work and right now center should not work but then I'll do a follow up extension in a second.

[00:03:31] We will get that working as well. So similar to what we did with the dungeon dragons alignment. Your mission is to create an alignment type that will be the combination of vertical alignment and horizontal alignment that will get a and b working. Will break should break and it will at first break this should break at first but eventually work, box.

[00:03:54] I want you to spend five minutes on that and then we'll come back and do it as a team.