A little about Typescript Utility Types

murillonahas

Murillo Nahás

Posted on December 14, 2022

A little about Typescript Utility Types

Nowadays, TypeScript type system is very powerful, it provides for us type safety, productivity, scalability and so on. Therefore, TypeScript type system natively provides several "utility types" to help us with some type definitions and manipulations. In this article, I want to share 5 of them with you.

So, let's getting started.

Summary

  • Pick
  • Omit
  • ReadOnly
  • Partial
  • Required

1. Pick(Type, Keys)

The Pick utility type was developed to generate new types as a result of picking some properties from an existing type. This utility type is useful when you want to create a new type with specific properties inherited from a type with many properties.
Basically, Pick removes all but the specified keys from an object type.

type Person = {
  name: string
  lastName: string
  age: number
  hobbies: string
}

type SomePerson = Pick<Person, "name" | "age">

// type SomePerson = {
//  name: string;
//  age: number;
// }
Enter fullscreen mode Exit fullscreen mode

2. Omit(Type, Keys)

The Omit utility type is the opposite of Pick type, instead of stating what properties you want to keep, the Omit type expects the properties you want to omit. Using Omit type will be useful when you want to get rid of certain properties.

type Person = {
  name: string
  lastName: string
  age: number
  hobbies: string
}

type SomePerson = Omit<Person, "lastName" | "hobbies">

// type SomePerson = {
//  name: string;
//  age: number;
// }
Enter fullscreen mode Exit fullscreen mode

3. Readonly(Type)

The Readonly utility type is used to build types with all properties set to read-only. It is not possible to assign new values to the properties, it will result in a TypeScript warning.

type Person = {
  name: string
}

type ReadOnlyPerson = Readonly<Person>

const person: ReadOnlyPerson = {
  name: "Fizz",
}

person.name = "Buzz"
// Cannot assign to 'name' because it is a read-only property.
Enter fullscreen mode Exit fullscreen mode

4. Partial(Type)

The Partial utility type is used to build types with all properties set to be optional. The Partial utility type can be useful when we still don't know what an object will be.

type Person = {
  name: string
  lastName: string
  age: number
  address: string
}

type PartialPerson = Partial<Person>

// type PartialPerson = {
//   name?: string | undefined;
//   lastName?: string | undefined;
//   age?: number | undefined;
//   address?: string | undefined;
// }
Enter fullscreen mode Exit fullscreen mode

5. Required(Type)

The Required utility type does the opposite of Partial utility type. This utility type constructs a type with all properties defined as required. We can use the Required utility type to ensure that optional properties don't appear in the type.

type Person = {
  name?: string
  lastName?: string
  age?: number
  address?: string
}

type RequiredPerson = Required<Person>

// type RequiredPerson = {
//   name: string;
//   lastName: string;
//   age: number;
//   address: string;
// }
Enter fullscreen mode Exit fullscreen mode

As you can see above, I listed 5 of them, but there are several utility types that we can work with, they are very useful and will bring us type safety and organization. You can learn more by the official documentation here.

💖 💪 🙅 🚩
murillonahas
Murillo Nahás

Posted on December 14, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related