TypeScript Gymnastics: Why Are They So Powerful for You?

Hello and welcome to this talk where I talk about TypeScript and some advanced features of it. First of all, who I am. I'm Luca Del Pupo, Estonian Software Engineer at Pneumformal of JavaScript and TypeScript. And in my free time I try to run my YouTube channel, but I'm failing in that period because of time. And I also write the tech posts for tech people. In my free time, I also run, love running, hiking, and I love animals. By the way, let's start from here.

Probably most of you already came across something like this, a TypeScript file definition with thousands and thousands of rows and very difficult to understand. So today I'll try to help you to understand what happened inside of this file and how you can create your TypeScript function to improve the stickiness of your code base and to make your TypeScript code more strict. So at this point, let's jump to the code. Let's start from here. When you work with TypeScript and JavaScript, you have to understand where JavaScript and when TypeScript start.

For instance, in this example, we have a mix of, for instance, we have a type welcome and a const welcome, both with the same name. As you can see here, types is a specific type welcome with the value welcome to everybody. And const is a JavaScript variable in this case, with a string value welcome to everybody. This part is just TypeScript. This part is a mix of JavaScript and TypeScript. This code is real JavaScript code and this code will run after in your browser or inside of, I don't know, your node server or something. And this part, the second part of this line is only TypeScript code.

This helps us to make welcome to everybody const and we check if this string meets the welcome type. If you understand when JavaScript and TypeScript start, then you can start to work with advanced TypeScript. Today, I show you only code of TypeScript that basically disappears after the build phase, but help you to increase the developer experience or increase the stickiness of your app. Let's start from here.

When you work with TypeScript, it's important to be strict when you model your types. For instance, in this case, if you have a state, state can be a string. A string is too much open as value for what we want to describe. For instance, in this case, state can be starting, running, arriving, or retiring. And using TypeScript, we can do it using specific types, a literal type called starting. So, in this case, starting is not a real string, but is a type starting that say to TypeScript, the string must be a starting string, a string with a specific value starting, or a specific value running, or a specific value arriving, or a specific value retiring. And using the pipe, we can create a sort of order.

So, in this case, it can be one of these, but only once in a specific time. And then we can check if state, state in this case is equal to starting, is both a real string, but is also a string that in this case match with the state string, with the state type. Then using, we can use the pipes, so the union type also with other kind of type. For instance, the true, the false, we can create other type and we can mix true, false, and zero or one of type string and blah, blah, blah. We can use a union type also with the type, with object type.

And as you can see here, status, status is equal to zero and match the status. If you understand how literal types works, you can move to template literal type. In some cases, we want to create types from other types, in this case from string literal type. And for instance, what we want to do is to create a sort of combination between runner and state. So runner can be Kevin, John, or Dough. And state can be starting, running, arrived, and retired. We want to create a running status that basically match the runner name, is, and the state of the runner.

In this case, using the template syntax, so the backtick, and then using the common template syntax that you probably use in JavaScript, you can basically mix together the types and create the runner status. In this case, as you can see, runner status is a combination of all the possible runners with all the possible states, using the is. And if, for instance, remove the state, out of the box TypeScript removes this computation for us. And this means that if someone adds a new state, we will have for free the new status already mapped inside of the runner state.

And as you can see here, we can create a string that must match the specific types. In this case, arrived is without e at the end. And as you see, TypeScript is able to understand that Kevin is arrived without e, is not assignable to a runner state. Then we can use template syntax also to create other kinds of types. For instance, in this case, using RGB, we can say the first part here must be a number. Then there is a comma, another number, and another comma. In this way, we can describe the RGB pattern of a column. And as you can see here, we can use RGB, and in this case, 230, zero, and blah, blah, blah.

And as you can see here, we can use RGB, and in this case, 230, zero, and blah, blah, blah. But if I set a as the second value for the green part, as you can see, TypeScript is able to understand that a cannot be assignable to a number. This means that your thing cannot be assignable to an RGB color type. And as you can imagine, using this template syntax, we can create many, many types that help us to be more strict with our type system and to modeling in the best way the shape of our object and our types.

So when you understand this one, it's time to understand how we can handle if and else using the type system. Unfortunately, the type system doesn't have a real if statement but uses a sort of pattern matching. Take a look at this if condition type. This is a condition type, except three generic types. The first one is a condition, the second one is the true value if the condition is met, and the third one is the else if the condition doesn't. What does it mean? The first part is a condition that can be true or false.

And here, what we are doing is if C extends true, return the T generics; otherwise, return else. How we can use it? As you can see here, if I pass true and yes or no, the if will return yes. If I pass false, yes or no, the if will return no. This means that using the extends, we can create a sort of if, and if the extends have been met, we can do something. Otherwise, we can do other. So if you understood how the condition and the extend keyword works, you can move to the next example, the return type condition.

What this condition does is this return type condition accepts a generic T, and this T is a generics, and we want to check if the T is a kind of function, and if this is a function, please infer the return type of the function inside of R. If T basically is a function, at the end, we will return the return type of this function. Otherwise, we will return what is never. Never is nothing. This means that it is something that doesn't have nothing inside. In this case, the return condition, if I pass a function that returns a string, return a string. If I pass a function that returns a Boolean, return a Boolean. If I pass a Boolean, for instance, return a never. And the return type condition is already built in TypeScript. It's called a return type, and you can already use it to extract the return type of a function. And this means that you can extract the type from the function, and you don't have to recreate again the type. It means you have this type from an external library. You don't want to recreate the types, but you want to depend on that type. Using the return type, you can extract it from this function, and create, and then use this type for your business. The same we can do for the parameters.

So in this case, instead of using the infer inside of the return, we can use it inside of the parameter. The args is an array, so P at the end will be an array with all the parameters inside of it. In this case, the first one is without parameters, so there is an empty array. In this case, there are just one parameter with number, and we have an array with only one element, number. And also for the parameter condition, we already have a parameter built in inside of TypeScript, and the function is called parameter. You can use the extend also to extract data from a specific literal type. For instance, in this case, as you can see, we have an RGB type. And we want to check if the T is an RGB type, and we want to extract the red, the green, and the blue. Using T, we can do extend, we can use the backtick RGB, then we want to infer R, and if we want R be a number, the same we want to do with G, and we want that G is a number, and B blah, blah, blah. At the end, we want to return RGB if T extends the RGB number. Otherwise, we will return never. As you can see here, we can extract 255 for RGB here. We can extract the red, green, and blue also here. It's important to pay attention of this space, because if I remove the space from here, as you can see, this doesn't meet the requirement, because this one doesn't meet the pattern inside of the extend. As you can see, you have to pay attention also on these smaller things, because sometimes these can create a wrong result.

Okay, now it's time to move to loop. Okay, we understood how we can create if, and else. Now, it's time to understand how we can loop types to extract data. In each, you have a type, a user type that is an array that contain for each element of the array the column definition. In this case, name, first name, and value, name, last name, the value are string, and name, role can be manager or employee. We want to create a sort of get column that can be used in this way. We want to pass a user table and the name of the value, and return the definition of that column if exists. How we can do that? Using the loop. Unfortunately, in TypeScript, we cannot loop, but we can use recursion. So, how we can do that? Using list. We can check if list extend an array, and we want to pick the first element of the array, and basically spread the rest of the array inside of the rest. First, now we have to check if first extend a column with our specific name. If so, we can return first, otherwise, we want to iterate the list, the rest of the list.

How we can do that? We can call again, get column. But this time, we don't pass a list, but we pass the rest of the column that we haven't checked yet with the same name. This, as you can imagine, is a sort of recursion that, at some point, this list, if you don't have any column with that name, you will return never. Otherwise, at some point, you will return the first, and this is the result. You can basically create also other kind of loop, more simpler. For instance, in this case, we can use append. You have a tuple and the element using the spread. Basically, you can create another type with the first part of the array and the new element. In this case, we have one, two, three, and four, and the result is one, two, three, four. If you have an empty array, you can pass four. If you have a lot, you can have a lot and a lot, and blah, blah. You can also mix. You can create, find, filter, whatever you want. This is just a matter of what you need to do, and you can create your own TypeScript conditional type to create other types.

Another important part, when we work with TypeScript, we want to work with object types, and we want to manipulate them. What we want to do is to remove a field, add a field, or remove optional condition, or make everything optional, or add read-only, and blah, blah. To do that, we must know just two important things in TypeScript, the key of a keyword and the mapper type.

The key of is a specific keyword that allows us to get all the props of a specific type. In this case, if I call key of person, I will receive all the first-level props of the person interface. In this case, name, so name, age, gender, address, email, phone, and policy accepted.

Then we have the mapper type. Mapper type is the way to manipulate the types of object inside of TypeScript. The syntax is pretty simple. It's like the object syntax, and we have to define the key of the object and the type of that key.

Using key in, we are saying, okay, for each k inside of this list of key, in this case, all the person key, basically, you are creating a new object. In this way, I basically recreate the same person type using the mapper type.

What I want to do is basically use the key of, so I want to iterate to all the key of the person, and using the person bracket key, I can square bracket key, I can get the type of this specific key. The result is this new person that basically is the same interface recreated using the mapper type. If you understand how mapper types work, you can manipulate also the data.

For instance, you want to make everything optional. In this case, we want to create a partial person. Using the same syntax, you can add the question mark, in this case, and this means that for the partial person, we have all the question mark inside of the properties. This work only in the first level. If you want to do it also deep inside of each element, you have to create another type here.

If the person key type is an object, you have to iterate inside of the types and create this also inside of the nested object. Then, partial utility is already built in in TypeScript, so you can use partial person here. You can use required and the same is here. The required remove the question mark, so you will just need to add the dash before the question mark, and the result is basically you have all required, and required here is, as you can see, already implement.

Or you can create the read-only utility type. Basically, you want to add the read-only keyword for each property in this case, and also read-only is already built in if you want. And you can also use extract. Extract allow you to extract type from a specific type. For instance, in this case, you have extract type name, or surname or age, and you want to extract name and surname. Using the extract type, you have name and surname.

Extract is already built in in TypeScript, or you can use exclude that is the opposite of extract, or, for instance, you want to use pick or omit. Pick is basically a way to, from a type, pick only specific properties, like in this way, and pick is already implement. Also, in TypeScript, omit is the opposite. If you want to remove properties from a specific type, you have to basically use a pick and exclude all the properties that you want to exclude from. Pretty simple.

Using all this kind of utility, you can create and manipulate your types and create types that depend on other types. At the end, what happens is that you can have something like this. You can create a sort of get key function that accepts an object key and a key key that this key is a property that matches the specific property name that exists inside of T. This get all key utility is a bit enigmatic, but you can check it out in the repo without any problem. That basically uses all these kind of things that we've seen before to build a sort of union literal type with all the possible properties inside of that type.