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