A little about Typescript Utility Types

#webdev #typescript #programming #javascript

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;
// }

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;
// }

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.

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;
// }

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;
// }

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.