Template Literal Types

[00:00:00]
>> One thing that I don't know if we should implement live, let's do it like at least the theoretical part, cuz when I explain this to you later you'll find out why. TypeScript, Four point something, you have template literals and JavaScript, right? So you can do like, and then you do.

[00:00:22]
And you put a variable in there, right? So TypeScript added this super powerful thing, which is the ability to do that with your type definitions. So I could say type. And this is still somewhat limited. I long for a day where this is better. And this is way better than when I did this course last time.

[00:00:41]
So my longing is not from nowhere, right? So I could say, that it's a string that starts with a hash code, with a hashtag, right? And now this will only accept strings that start with that, which if they use it in their type system for this library great, it's relatively new TypeScript feature.

[00:01:03]
Yeah, it's totally safe to use it, for libraries. For your own code, totally safe to use. What TypeScript added in 4.6 or 4.7 was it used to be you could only put other string types in there. The crazy thing that and this is something I use in my code as well is, so when I say like RGBString like the one that like CSS respects.

[00:01:27]
Brand new in the last few months is the ability to do something like this, rgb and we could do number in here, right? Now the only problem is we know that rgbs are supposed to be maxed out at 255, you can't do a number range or anything that.

[00:01:50]
But you could make okay, now it has to be a string that matches this general pattern. Which is yeah, new-ish, right? And this is, yeah, not true of last time we did this workshop. And it's super powerful as well. And yes, at one point, did I try to make a union type of zero through nine A, B, C, D, E, F hashtag and then six of those.

[00:02:14]
I did try to do that. The number of type complexes I create has got TypeScripts say, absolutely not, right? And so, you are somewhat limited. You could say that it is six, you could say a string that starts with a hashtag, you could say that it's this and it could be any number.

[00:02:30]
You're still somewhat limited. But where this is really useful is you saw those action types I was creating. What I could do so yeah, this is update-hex-color, update-rgb-color, right? I could say that, Is so let's say we had, Color formats, I don't know. And we said it was rgb, hex, Hsl, Hsv, right?

[00:03:06]
I think those are the the ones I have. What I could do is say that my valid action types are, and I use this all the time in actions. If you look at this, it is now all of those made on the fly for me. Right, so I don't have to type them all.

[00:03:34]
The camera can't see the faces facing me, but I can see them. Some of the power inconvenience. So for a lot of stuff, if you're getting resources like requested, loaded error or loading, you can automatically have these templates that you're kind of using. And generate a bunch of these string types automatically and particularly actually in this use case, I use this a lot, right?

[00:03:59]
I will use it for all sorts of different statuses and stuff along those lines where I expect something. So something like this is super useful. Now the problem is, we saw with that, we have value as number, however this type that I made like those color inputs are not going to give me this type, right?

[00:04:21]
And so you would have to write something like this to check it all the time. So that's why we're not totally gonna go all the way down this road but I do want to tell you that this road exists and so we can do isHexColor and we'll take some string, right?

[00:04:37]
So we wanna insist as a string in the very beginning. And I can say return, Starts with a hash, which is really the only thing that makes this true. And then if this is a Boolean return, right, normally, right? It says it returns a Boolean, what I can do is say And it's basically TypeScript is saying, if you validate that this is the right type I will believe you.

[00:05:06]
Right, and so if it's like, yo, that string was totally had a hash tag at the beginning, right? This is just as a string because the type system, I don't really know. You can write this logic, and now if something goes in, right, it will tell you that this is the actual type that you want to use, right?

[00:05:23]
And so you can like say, hey, Texas, I'm not sure you're like, let me check It is. And they'll be like, okay cool. This is a hex color, I'll treat it like that from now on, super, super powerful. I use this especially when getting JSON data back from APIs, right?

[00:05:38]
Where it could be anything. And I want to insist as a certain type throughout my code base when I get that API request back in, I will do a bunch of these checks and cast it to the correct type based on these super unit tested. Because this is a powerful tool so if you just like, if this returns true I can cast anything I want to anything, right?

[00:05:56]
But I can go ahead and if I really don't know what something is, like if it could be an array or could be a string or something like that, that's where unknown comes in, where it makes no assumptions. You figure out everything in the Thunderdome over here. And then whatever comes out will be the type that it uses.

[00:06:13]
So that mistake gave us an interesting aside which I'm, we'll call it a total win. But yeah, so now I should I think I already validated everything worked but yeah there are little things that can go wrong and sometimes the type system is not going to totally help you.

[00:06:30]
But there are also techniques that you can do, right, that will save you from some of these headaches. You just kinda have to step in, if you work with TypeScript, TypeScript could have caught that for me. I'd be like, yo, when I set this state, which is eventually what those other things took that value and tried to convert into something, it was a library code that was crashing, not mine.

[00:06:51]
It was my mistake, but it was a library code that was crashing. But I could say, never let a string out of here that does not start with a hashtag. I could definitely have TypeScript help me with that, right, using the technique that I just showed you.