TypeScript Pick<Type, Keys> Utility Type

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.