In this article, we are going to learn about the Pick<Type, Keys> utility type in TypeScript. TypeScript is a programming language that is a strict syntactical superset of JavaScript. It adds optional static typing and class-based object-oriented programming to JavaScript, Pick<Type, Keys> is one of the features of Typescript which is a built-in utility type it is used to create a new type by picking some of the properties from the given Type based on the keys specified in the Keys parameter, with the help of this we can create a new object with some certain properties that belongs to the existing object.
Syntax:
type NewType = Pick<Type, Keys>;
- Type: It is the type from which you want to pick the properties.
- Keys: It is a union type of key that you want to pick.
Partials Vs Pick<Type, Keys>: Pick and Partial are two different utility types in TypeScript, although they have some similarities, while Pick is used to create a new type by selecting specific properties from an existing type, Partial is used to create a new type by making all properties of an existing type optional.
Approach: We can see how we can use the Pick utility type through this step-by-step approach for easy understanding.
Step 1: First of all we will need to define the original type that we want to pick properties from.
interface Person {
name: string;
age: number;
gender: string;
address: string;
}
Step 2: Now we will need to define the new type that you want to create using the Pick utility type, in this case, the new type is PersonDetails and the original type is Person and we want to pick the name and age properties from it.
type PersonDetails = Pick<Person, 'name' | 'age'>;
Step 3: And now we can use the new type PersonDetails in your code.
const person: PersonDetails = {
name: 'John',
age: 30,
};
Step 4: And finally we can use it as per our requirements.
Example 1: In this example, first of all, we will create an interface called Person with three properties name, age, and address, and now we will create a new type in which we want to use only the name and age property, not the address so that we will use the Pick utility type. So we have created the new type named NameAndAge using the Pick<Type, Keys>, as the name suggests we have only chosen the name and age properties from the Person interface and assigned the value of { name:’John’, age: 30}. We can see that in the given example below.
Javascript
/* Define an interface called "Person" that has three properties: name, age, and address, all with their respective data types */interface Person { name: string; age: number; address: string; } /* Define a type called "NameAndAge" that is created by picking the "name" and "age" properties from the "Person" interface */type NameAndAge = Pick<Person, 'name' | 'age'>; /* Declare a constant "person" that is of type "NameAndAge" and has the values of "name" and "age" properties */const person: NameAndAge = { name: 'John', age: 30 }; /* Output the value of the "person" constant to the console */console.log(person); |
Output:
Example 2: In this example, first of all, we will create an interface called MyUser with four properties id, username, email, and password. here we will use the Pick utility type with functions so we have defined a function called gerUserDetails which will only take a MyUser object with username and email properties and it will return the string with those specific details as we can see in the example below.
Javascript
/* This is an interface called User which defines the properties of a user object */interface MyUser { id: number; username: string; email: string; password: string; } /* This is a function called getUserDetails which takes a user object with only the username and email properties and returns a string that contains the username and email */function getUserDetails(user: Pick<MyUser, 'username' | 'email'>): string { return `Username: ${user.username}, Email: ${user.email};` } /* This is a user object that has all the properties defined in the User interface */const user: MyUser = { id: 123, username: 'johndoe', email: 'johndoe@example.com', password: 'password123', }; /* This calls the getUserDetails function with the user object as an argument The result is stored in a constant called userDetails */const userDetails = getUserDetails(user); // This logs the userDetails string to the console console.log(userDetails); |
Output:
Conclusion: In this article, we have covered what is Pick utility type with its syntax and two working examples, as we can see in the 2nd example how it can be useful when we want to create a new type with some necessary properties for certain use case and here we have used to with getUserDetails function. We have also seen why it is different from Partials is also a Typescript feature and has some similarities with the Pick utility type. The Pick utility type is particularly useful for developers who work with TypeScript and want to create new types with specific properties. It is especially useful in larger codebases where you may have many different types with many different properties.
