5 Utility Types For Transforming Types in Typescript

One of the great things about typescript is its flexibility. You can transform, change, and create new types using existing types. In this article, we will look at 5 such utility types that every developer should know.

Omit

As the names suggest, it’s used to omit the properties of a type. Let’s look at an example.

type Person = {
  firstname: string
  lastname: string
  email: string
  age: number
}

If we want to drop age from this type and create a new type, we can do:

type PersonWithoutAge = Omit<Person, 'age'>

The resulting type will be.

type PersonWithoutAge = {
  firstname: string
  lastname: string
  email: string
}

We can omit more than one property using | (pipe), like below:

type SimplePerson = Omit<Person, 'email' | 'age'>

And the resulting type will be.

type SimplePerson = {
  firstname: string
  lastname: string
}

Pick

It does the opposite of what Omit does. We can use Pick to cherry pick properties we want from a type. For example, in our SimplePerson example type, instead of omitting email, age from Person, we can use Pick, to pick firstname and lastname to create a type. Here is an example:

type SimplePerson = Pick<Person, "firstname" | "lastname">

Resulting in the same type from when we used Omit.

type SimplePerson = {
  firstname: string;
  lastname: string;
}

Partial

This type I find myself using the most. Use Partial to make all properties of a type optional. Sometimes, we don’t need to provide values for all properties of an object. In that case, we can use Partial to create a new type resulting in a type with all properties optional. Let’s look at an example. If we want to make our Person properties optional.

type PartialPerson = Partial<Person>

Resulting in following type.

type PartialPerson = {
  firstname?: string | undefined
  lastname?: string | undefined
  email?: string | undefined
  age?: number | undefined
}

Required

This type does exact opposite of what Partial does. It converts all the optional properties of a type to required. Let’s say, we want to make properties of PartialPerson, to mandatory. We can do that, like below.

type RequiredPerson = Required<PartialPerson>

Resulting in the following type.

type RequiredPerson = {
  firstname: string
  lastname: string
  email: string
  age: number
}

Readonly

As the name says. If you don’t want to allow, assigning values to object properties, you can use this. Readonly makes all the properties of a type, readonly (I know you guessed). I find this very useful when creating a React state object which prevents assigning values to state properties. Here is how to use it.

type ReadonlyPerson = Readonly<Person>

And the results type will look like this.

type ReadonlyPerson = {
  readonly firstname: string;
  readonly lastname: string;
  readonly email: string;
  readonly age: number;
}

I hope, I’ve given you enough knowledge to start using utility types for transforming types. With this knowledge, you should be able to combine and create new types from existing types.

Source: Medium ; Varun Pujari

The Tech Platform

www.thetechplatform.com