Back

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