TypeScript Pick Utility Type
`Pick< T, K>` creates a new type by selecting specific properties from an object. It’s perfect for working only with the needed fields from large objects.
What Does Pick Do?
type User = {
id: number;
name: string;
email: string;
};
type UserPreview = Pick<User, "id" | "name">;
// UserPreview:
// {
// id: number;
// name: string;
// }
`Pick` generates a new type based on the specified keys, excluding all others.
Practical Use: Login Screen Data
function showUser(user: Pick<User, "name" | "email">) {
console.log(`${user.name} <${user.email}>`);
}
showUser({ name: "Alice", email: "alice@example.com" });
// Output: Alice <alice@example.com>
For scenarios requiring only name and email, use `Pick< User, "name" | "email" >`.
ID-Based Data Display
const shortInfo: Pick<User, "id"> = {
id: 123
};
console.log(shortInfo);
// Output: { id: 123 }
Sometimes fetching just a single property like `id` is enough.
When to Use Pick?
`Pick` is great for passing only necessary props to components or filtering API response data.
Back