DEV Community

Cover image for Typescript Utility Types
Kevin Toshihiro Uehara
Kevin Toshihiro Uehara

Posted on

Typescript Utility Types

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:

type User = {
  id: number;
  name: string;
  userName?: string;
}
Enter fullscreen mode Exit fullscreen mode

Partial

Makes the all the properties of the type undefined.

type PartialUser = Partial<User>;
Enter fullscreen mode Exit fullscreen mode

Partial image. All properties can be undefined

Required

Makes all the properties of the type required.

type RequiredUser = Required<User>;
Enter fullscreen mode Exit fullscreen mode

Image - Makes all the properties of the type required

Omit

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

type OmitUserUsername = Omit<User, "userName">;
Enter fullscreen mode Exit fullscreen mode

Image - remove userName property

We can pass an union types for more properties:

type OnlyId = Omit<User, "userName" | "name">;
Enter fullscreen mode Exit fullscreen mode

Image - Omit all properties and use only the id

Pick

Unlike Omit, we can pick some property of the type

type PickId = Pick<User, "id">;
Enter fullscreen mode Exit fullscreen mode

Image - pick only the ID

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

type WithoutUser = Pick<User, "id" | "userName">;
Enter fullscreen mode Exit fullscreen mode

Image - Pick without user property

ReadOnly

Turns the properties read-only

type ReadOnlyUser = Readonly<User>;
Enter fullscreen mode Exit fullscreen mode

Image - readonly properties of user

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

Image - creating the object readonly

Image - error trying to change some property

Utility Types For Union Types

Let's create our Union Type:

type Role = "admin" | "user" | "manager";
Enter fullscreen mode Exit fullscreen mode

Exclude

It will remove some type of the union types

type NoUserRole = Exclude<Role, "user">;
Enter fullscreen mode Exit fullscreen mode

Image - removing the user role

Extract

Let's create another union types:

type RoleAttributes =
  | {
      role: "admin";
      permission: "all";
    }
  | {
      role: "user";
    }
  | {
      role: "manager";
    };
Enter fullscreen mode Exit fullscreen mode

Now let's extract the admin using:

type AdminRole = Extract<RoleAttributes, { role: "admin" }>;
Enter fullscreen mode Exit fullscreen mode

Image - extracting admin role

NonNullable

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

type MaybeString = string | null | undefined;
Enter fullscreen mode Exit fullscreen mode
type NonNullableString = NonNullable<MaybeString>;
Enter fullscreen mode Exit fullscreen mode

Image - only the string without null and undefined

Utility Types For Functions

Let's define our type of function:

type myFunction = (a: number, b: number) => number;
Enter fullscreen mode Exit fullscreen mode

ReturnType

It will return the type of the return of the function

type ReturnValueFunction = ReturnType<myFunction>;
Enter fullscreen mode Exit fullscreen mode

Image - returns a the type of the return of the function

Parameters

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

type MyParameters = Parameters<myFunction>;
Enter fullscreen mode Exit fullscreen mode

Image description

Awaited

It will return the type of a Promise

Let's define a type of Promise

type PromiseUser= Promise<User>;
Enter fullscreen mode Exit fullscreen mode
type Result = Awaited<PromiseUser>;
Enter fullscreen mode Exit fullscreen mode

Image - returning the type of the promise that is an user

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

Define the type of the result of this async function:

const getMyName = async () => {
  return {
    name: "Kevin",
  };
};
Enter fullscreen mode Exit fullscreen mode

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

The answer:

type MyNameResult = Awaited<ReturnType<typeof getMyName>>;
Enter fullscreen mode Exit fullscreen mode

Image - object type contained only string

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

Top comments (0)