Typescript Utility Types
Tags: webdev, typescript, javascript, beginners
Published: 2023-08-06 23:20:30

Hi Folks! It's nice to have you again!

In this small article I will talk about the **Utility Types of Typescript**

Utility types are features available on all typescript code. So let's see some them:

## Utility Types For Objects

First let's define some object as type:

```ts
type User = {
  id: number;
  name: string;
  userName?: string;
}
```

### Partial

Makes the all the properties of the type undefined.

```
type PartialUser = Partial<User>;
```

![Partial image. All properties can be undefined](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/462kfrp4t577ufa6lagj.png)

### Required

Makes all the properties of the type required.

```
type RequiredUser = Required<User>;
```

![Image - Makes all the properties of the type required](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/crit46ryl3i623791jed.png)


### Omit

We can omit some property of the type and create a new type without it.

```
type OmitUserUsername = Omit<User, "userName">;
```

![Image - remove userName property](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gy4cbz5ci0zlz2weooos.png)

We can pass an union types for more properties:

```
type OnlyId = Omit<User, "userName" | "name">;
```

![Image - Omit all properties and use only the id](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3gcu0uup58ttg2u1eurh.png)

### Pick

Unlike Omit, we can pick some property of the type

```
type PickId = Pick<User, "id">;
```

![Image - pick only the ID](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zzmcraoo7vn1hwlyd935.png)

And as Omit, We can pass an union types for more properties:

```
type WithoutUser = Pick<User, "id" | "userName">;
```

![Image - Pick without user property](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5u6l3q773rd4pldt7rl0.png)


### ReadOnly

Turns the properties read-only

```
type ReadOnlyUser = Readonly<User>;
```

![Image - readonly properties of user](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y2qfoudcspu7radv3gkj.png)

If we try to change some property we will have some error:


![Image - creating the object readonly](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6vw6rzwx3ixni5vaq670.png)


![Image - error trying to change some property](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4xyis7h46ijm3emzvapc.png)


## Utility Types For Union Types

Let's create our Union Type:

```ts
type Role = "admin" | "user" | "manager";
```

### Exclude

It will remove some type of the union types

```ts
type NoUserRole = Exclude<Role, "user">;
```

![Image - removing the user role](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ydaeehdtqbzxro2f3i0.png)

### Extract

Let's create another union types:

```ts
type RoleAttributes =
  | {
      role: "admin";
      permission: "all";
    }
  | {
      role: "user";
    }
  | {
      role: "manager";
    };
```

Now let's extract the `admin` using:

```ts
type AdminRole = Extract<RoleAttributes, { role: "admin" }>;
```

![Image - extracting admin role](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/34t4x9e13hdpqz066r2u.png)

### NonNullable

Let's define a union type where the result can be a string, null or undefined;

```ts
type MaybeString = string | null | undefined;
```

```ts
type NonNullableString = NonNullable<MaybeString>;
```

![Image - only the string without null and undefined](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/crwssde4i2ycj50lxqg5.png)



## Utility Types For Functions

Let's define our type of function:

```ts
type myFunction = (a: number, b: number) => number;
```

### ReturnType

It will return the type of the `return` of the function

```ts
type ReturnValueFunction = ReturnType<myFunction>;
```

![Image - returns a the type of the return of the function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4bcxc4d5715ol0njn5mc.png)

### Parameters

It will return a **tuple** of the parameters of the function:

```ts
type MyParameters = Parameters<myFunction>;
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wakxylxox3j9o2beutx6.png)


### Awaited

It will return the type of a Promise

Let's define a type of Promise<User>

```ts
type PromiseUser= Promise<User>;
```

```ts
type Result = Awaited<PromiseUser>;
```

![Image - returning the type of the promise that is an user](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gisnfzkbm16ctuzi96n5.png)



And that's it guys! Let's see some challenge?

Define the type of the result of this async function:

```ts
const getMyName = async () => {
  return {
    name: "Kevin",
  };
};
```

How we can get a object type that is a string?

**The answer:**

```ts
type MyNameResult = Awaited<ReturnType<typeof getMyName>>;
```

![Image - object type contained only string](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m3wh0dvv9aw36anszpzz.png)


So, thank you guys for getting this far. 
That's it, the Typescript offers some utility types that can help you on your development.


Contacts:

Linkedin: https://www.linkedin.com/in/kevin-uehara/
Instagram: https://www.instagram.com/uehara_kevin/
Twitter: https://twitter.com/ueharaDev
Github: https://github.com/kevinuehara
Youtube Channel: https://www.youtube.com/channel/UC6VSwt_f9yCdvEd944aQj1Q