Typescript, the most unnecessary addition to web development, is what I would have said a few years ago. I know some of you think it’s a wannabe C# introduced by Microsoft to make our lives a living hell, but Typescript is quite cool actually, hear me out. Love it or hate it, it’s being used in modern codebases, and you must be up to speed with it if you want to be useful to a lot of teams.

Today I’m going to be sharing with you some typescript utility types you can use in your code to give you that senior developer feel, and also so you can stop sprinkling type any everywhere in your codebase.

Let's begin, shall we......

1. Partial

So let's say you wanted to create a user object, as you know you can create a type or an interface for that object like below.

Let’s say you wanted to update some properties of this user object, you can define a function called update with a parameter of type User, and then spread the values of this parameter into the user object.

If we try to use this function, you can see we get an error. The values in our parameter don’t match the User type, because phone_number, id and password fields are missing.

For a quick fix, you could make all the properties on the User type optional, but that is such a junior dev move. Now this is where the Partial utility types shines.

Partial makes all your fields optional without actually modifying the existing User type, so you can calmly update your user object without the editor screaming at you.

1. Omit

Sometimes you have to create a new user in your database and you send the created user to your server via POST request from your frontend, and then your server assigns an ID to your user before sending it to the database. This can be easily done by defining a createUser function from your front end.

But here’s the problem, the ID is not given till it gets to the server, but we’re still gonna use the User type when we retrieve the user from the server, which would have been assigned an ID by then, so removing the id property is not an option.

You could easily make the id property optional, which is also such an amateur move, you can do better.

This is where the Omit utility shines. With the Omit utility, you can create a new type by removing 1 or more properties from a type you previously created.

Now you can send that user to your back end without any fears or editor hell.

1. Pick

Now, Pick is basically just the reverse of Omit. Assuming you wanted to create a new type that has some of the properties of a previous class you created. Instead of creating an entirely new type, you have the Pick utility types at your disposal. As it implies, this utility picks certain properties from an existing type, which are defined by you. For example:

This approach basically breaks the DRY rule(Don't Repeat Yourself), because both interfaces have almost the same properties.

This is much better init😂

1. ReturnType

Let’s say you defined a function that returned a string or a number, like below. You can use the ReturnType utility to get the type of what the sayHello function returns.

This is extremely useful if you don’t want to create an entirely new type for what a function may return.

That’s all for this week guys, if you liked this article be sure to leave a reaction and a comment, and for tips and tricks like these be sure to follow me here on Hashnode and on my Twitter at @alebiosu_thedev.

Alight till next week, and remember, stop sprinkling any😶