Deep dive into TypeScript Utility Types. Part 1
Tags: typescript, javascript, programming
Published: 2022-07-20 15:41:06

If you are using TypeScript on an everyday basis or just getting familiar with it, you might have heard about its utility types. Utility types are the built-in types that you can use as a developer without needing any additional packages. Most of the time we don't ponder about how those types are designed under the hood and just use them according to [TypeScript Documentation](https://www.typescriptlang.org/docs/). Don't take me wrong, there is nothing bad with that, especially considering that TypeScript is managed by Microsoft and there is a bunch of smart people responsible for it. But to better understand how utility types work, there is a better approach - to implement them on your own.

So, let's dive deep into it and try to implement custom utility types.


## Partial<T>

The first type we'll discuss today is `Partial<T>`. According to documentation:

> `Partial<T>` constructs a type with all properties of `T` set to optional and returns a type that represents all subsets of a given type. 

Before implementing any of the TypeScript Utility types there is one important thing we should discuss - Mapped types. In short, Mapped types build on the syntax for index signatures, which are used to declare the types of properties which has not been declared ahead of time. Okay, less talking more coding.


![Custom Partial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v0rl2szuvpl9hwqbsnqa.png)

So, what is going on in the example above? The first and foremost thing to understand is that by using mapped types we just simply iterating all properties of type `T` that is passed as a generic argument to our custom partial type. But iterating is not just enough since partial means that all the properties should be optional. To do so, we use mapping modifiers, more specifically ?, which serves as optionality modifier.

## Required<T>

The next utility type we'll take a look at today is `Required<T>`. In general, it is simply opposite to `Partial<T>` that accepts as generic argument some object of type `T` and makes all of its properties required. To remove optionality modifier we simply prefix it with -.

![Custom Required](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lm4hyqrqvo5bzh9jbg8j.png)

## Readonly<T>

`Readonly<T>` is yet another utility type that is immensely easy to implement. In this case, everything that is needed to make all properties of `T` immutable is to add readonly mapping modifier.


![Custom Readonly](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lvqus5qkiu54o9rq0puf.png)

## Record<K, T>

So far, we've been talking about simple types that cause no problem to implement. On contrary, `Record<K, T>` is a little bit different and is designed to construct an object of specific structure - to accept only certain types of values as its property keys and property values. The custom implementation of `Record<K, T>` would look something like this:

![Custom Record](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y6zz7kzle15alcrcc0pl.png)

Since the user is responsible for providing us with valid types that should be keys (K) instead of iterating all keys in `T` as we did in `Partial<T>`, `Required<T>` and `Readonly<T>` we simply iterate through all properties in `K` - `P in K`. Another thing worth our attention for better understanding is `K extends number | string | symbol`. Since our custom record type is an object and as we know javascript object accepts as key values only string, number or symbol by typing `K extends number | string | symbol` we just manually telling that our `MyRecord<K, T>` should follow this rule as well.

## Final words

Thanks for reading the first part of the "Deep dive into TypeScript Utility Types" series. Hope it will throw light on TypeScript Utility types and help to understand how they are implemented. Next time, we will discuss other types as `Pick<Type, Keys>`, `Omit<Type, Keys>`, `ReturnType<Type>`, and much more.


Keep in touch and happy coding.