TypeScript Pick<Type, Keys> Utility Type

TypeScript’s Pick<Type, Keys> utility type allows you to create a new type by selecting specific properties (`Keys`) from an existing type (`Type`). This is useful for narrowing down types to only the relevant properties, enhancing type safety, and reducing redundancy in complex type definitions.

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, we define a Person interface and use the Pick utility type to create NameAndAge, selecting only name and age properties, resulting in { name: ‘John’, age: 30 }.

// Define a "Person" interface with name, age, and address properties
interface Person {
    name: string;
    age: number;
    address: string;
}

// Create "NameAndAge" type using Pick to select name and age from Person
type NameAndAge = Pick<Person, 'name' | 'age'>;

// Declare "person" of type "NameAndAge" with name and age values
const person: NameAndAge = { name: 'John', age: 30 };

// Log the "person" constant
console.log(person);

Output:

{ name: 'John', age: 30 }

Example 2: In this example, we create a MyUser interface and use the Pick utility with a getUserDetails function, which accepts a MyUser object with only username and email, returning a formatted string.

// Define "MyUser" interface
interface MyUser {
    id: number;
    username: string;
    email: string;
    password: string;
}

// Function to get user details
function getUserDetails(user: Pick<MyUser, 'username' | 'email'>): string {
    return `Username: ${user.username}, Email: ${user.email}`;
}

// Create a "user" object
const user: MyUser = {
    id: 123,
    username: 'johndoe',
    email: '[email protected]',
    password: 'password123',
};

// Get and log user details
const userDetails = getUserDetails(user);
console.log(userDetails);

Output:

Username: johndoe, Email: [email protected]

Conclusion

the Pick utility type in TypeScript allows developers to create new types with specific properties from existing types, enhancing type safety and reducing redundancy. It’s especially useful in large codebases with complex types, offering precision and flexibility in type management.

iamgaurav

Follow

Improve

Article Tags :

• JavaScript
• TypeScript
• Web Technologies