TypeScript Pick Understanding the Pick keyword in TypeScript

TypeScript Pick: Understanding the Pick keyword in TypeScript

by

What is TypeScript Pick?

The Pick keyword in TypeScript is a utility type that allows you to create a new type by picking specific properties from an existing type.

Syntax:

type NewType = Pick<ExistingType, 'Property1' | 'Property2' | …>;

This results in the formation of a new type (NewType), which only includes the chosen properties (Property1, Property2, etc.) from the ExistingType.

Let’s take a look at the example:

type Employee = {
  name: string;
  age: number;
  email: string;
};

Now, if you want to create a new type that only includes the ‘name’ and ’email’ properties, you can use ‘Pick’:

type EmployeeContactInfo = Pick<Employee, 'name' | 'email'>;

After that, the result of EmployeeContactInfo type will look like this:

type EmployeeContactInfo = {
  name: string;
  email: string;
}

How to use the Pick keyword in TypeScript?

Here’s a step-by-step guide:

Step 1: Define an interface or type

interface Employee{
name: string;
age: number;
address: string;
}

In this example, we have an Employee interface with name, age, and address properties.

Step 2: Use the Pick utility type

type EmployeeNameAndAge = Pick<Employee, 'name' | 'age'>;

Here, we’re using Pick to create a new type EmployeeNameAndAge that includes only the name and age properties from the Employee interface.

Step 3:Use the new type

let employee1: EmployeeNameAndAge = {
name: 'Itsourcecode',
age: 18
};

Now, employee1 is of type PersonNameAndAge, so it can only have a name and age properties.

TypeScript Omit vs Pick

The omit keyword removes certain properties from an existing type.
You have to specify which properties you don’t want, and it creates a new type without those properties.
Example:

You have a type for a User with ID, name, email, and age. If you want a type that has everything except email and age:

type StudentWithoutEmailAndAge = Omit<Student, 'email' | 'age'>;
// Now StudentWithoutEmailAndAge has only `id` and `name`.

Here’s the complete code:

interface Student {
  id: number;
  name: string;
  email: string;
  age: number;
}

type StudentWithoutEmailAndAge = Omit<Student, 'email' | 'age'>;

// UserWithoutEmailAndAge is equivalent to:
// {
//   id: number;
//   name: string;
// }

// Example usage:
const student: StudentWithoutEmailAndAge = {
  id: 0001,
  name: "Itsourcecode"
};

console.log(student);

Output:

{ id: 1, name: 'Itsourcecode' }

On the other hand, the pick keyword keeps only certain properties from an existing type.

You have to specify which properties you want, and it creates a new type with just those properties.

Example:

Using the same User type, if you only want a type with name and email:

type StudentNameAndEmail = Pick<Student, 'name' | 'email'>;
// Now StudentNameAndEmail has only `name` and `email`.

Here’s the complete code:

interface Student {
  id: number;
  name: string;
  email: string;
  age: number;
}

type StudentNameAndEmail = Pick<Student, 'name' | 'email'>;

// UserNameAndEmail is equivalent to:
// {
//   name: string;
//   email: string;
// }

const studentNameAndEmail: StudentNameAndEmail = {
  name: "Itsourcecode",
  email: "itsc.com"
};

console.log("StudentNameAndEmail:", studentNameAndEmail);

Output:

StudentNameAndEmail: { name: 'Itsourcecode', email: 'itsc.com' }

In simple understanding, the key difference is that the omit keyword removes parts you don’t need, and the pick keyword chooses only the parts you do need.

So, omit helps you create a new type by leaving out some properties, while pick helps you create a new type by selecting only specific properties.

Conclusion

In conclusion, we’re done exploring the pick keyword in TypeScript which is a utility type that lets you create smaller types from bigger ones. It keeps your code safe and lets you work with only the parts you need.

Using Pick well can make your TypeScript code better and easier to manage.

I hope this article has helped you understand TypeScript Omit.

If you have any questions or inquiries, please don’t hesitate to leave a comment below.

Leave a Comment