If you already have a subscription, you can sign in.
Enjoy free content straight from your inbox 💌
00:00
TypeScript has certain type utilities which are so powerful that they are encoded directly into the brain of the compiler. And in this tutorial we will look at one category of these related to string manipulation. So let's go consider creating a utility type function that takes a string literal as input and is designed to return its uppercase variant. Now this utility type that we've created will work for single character literals. We are only catering for A and B over here, but of course we can add more as well. And of course it'll uppercase to string literal A to its uppercase variant.
00:32
And the same is true for B as well. And if you wanted, we could even go one level beyond this and create recursive version as well that will first check if a particular string literal starts with A, and then in that case it'll uppercase the A and return the uppercase recursive variant of the rest of the string literal. It'll do the same for B and all of the other characters as well. And we can verify this by creating a string little that only contains characters A and B. And if you look at the result, you can see that it is indeed uppercase thanks to this recursive uppercase function.
01:05
Now if you want to build a type like this, as you would imagine every single time you would use this, the type strip compiler would have to go through all of the conditions to figure out what the output type should be. So to code the TypeScript compiler team, these types are built into the compiler for performance reasons. So instead of trying to create our own version, which I'm not going to lie, is probably not going to work that well, we are instead going to use the built-in type utility within TypeScript called uppercase, which does exactly the same thing which one apply to the lowercase ever, does exactly what we would expect and returns the uppercase abba.
01:37
Now, if you were to go to the definition of this particular type utility, you can see that it actually points to something called intrinsic. What this means is that there is actually no definition for this. This is something that is baked into the touch of compiler. Now, in addition to uppercase, there are a few other intrinsic string manipulation utilities as well. So let's take a look. Similar to uppercase, there is a lowercase type utility. So if you have a string, hello fam all capital, we pass it through lowercase, it returns the type, hello fam, all lowercase. There is also a type utility called capitalize,
02:09
which will capitalize the first character. So in this particular case, FI five four form the first character, which is F of fee, is going to get capitalized and everything else remains unchanged. And similar to capitalize is its inverse called uncapitalized. So if you were to pass in our loud, which has every character as capital, it is only going to turn the first one into lowercase. The edge becomes lowercase and everything else remains unchanged. Now if you are curious like me, these functions do not work on punctuations. So exclamation mark will remain unchanged
02:42
'cause there is no capital exclamation. But they do work on special characters. For example, the acute E in resume is going to be updated in the results. And similarly, if you had lowercase as well as capital Gamma, you can see that when we pass that through uppercase, both of them turn into capital Gamma. Now an obvious question that you're going to have is what would be the use case for something like this? And most commonly these are utilized by combining them with TypeScript template, literal types. As an example, we can create these utilities called getter and setter, which are designed to take a string literal
03:15
as an input and generate the name get and set respectively, followed by the capitalization of the past and string literal. So if we have a string called name, we can generate a getter for that called get name and a setter for that called set name. And we can verify that that is indeed the result by hovering over get name and then hovering over set name.