Mapping Types

Pick<T, K>

Constructs a type by picking the set of properties K from T, creating a subset of the original type.

Definition

TypeScript
type Pick<T, K extends keyof T> = {
  [P in K]: T[P];
};

Examples

Selecting Fields
interface User {
  id: number;
  name: string;
  email: string;
  password: string;
  createdAt: Date;
}

type PublicUser = Pick<User, "id" | "name" | "email">;
// { id: number; name: string; email: string; }

const publicUser: PublicUser = { id: 1, name: "Alice", email: "[email protected]" };
API Response Shaping
interface Product {
  id: string;
  name: string;
  description: string;
  price: number;
  inventory: number;
  internalNotes: string;
}

type ProductListItem = Pick<Product, "id" | "name" | "price">;

function getProducts(): ProductListItem[] {
  return [
    { id: "1", name: "Widget", price: 9.99 },
    { id: "2", name: "Gadget", price: 24.99 },
  ];
}
Component Props
interface FullButtonProps {
  label: string;
  onClick: () => void;
  disabled: boolean;
  variant: "primary" | "secondary";
  size: "sm" | "md" | "lg";
  icon?: React.ReactNode;
}

type SimpleButtonProps = Pick<FullButtonProps, "label" | "onClick">;

function SimpleButton({ label, onClick }: SimpleButtonProps) {
  return <button onClick={onClick}>{label}</button>;
}

Common Use Cases

  • 1Selecting specific fields for public API responses
  • 2Creating focused component prop types
  • 3Building view models from domain entities
  • 4Reducing over-fetched data in GraphQL-like patterns
  • 5Type-safe projections for database queries

Understanding Pick<T, K>

Pick<T, K> constructs a type by selecting a set of properties K from the type T. The K parameter must be a union of keys that actually exist on T, and the resulting type contains only those selected properties.

This utility type is fundamental for API design. When exposing data to clients, you often need to strip sensitive or internal fields. Rather than defining separate interfaces manually, Pick lets you derive public types from your internal models. If the internal model changes—say a field is renamed—Pick-based types automatically reflect the change, keeping your codebase DRY.

In React applications, Pick is frequently used to create focused prop types. A complex component might accept many props, but a simpler wrapper only needs a few. Using Pick to derive the wrapper's props from the full interface ensures consistency and reduces maintenance burden.

Pick also enables the principle of least privilege in function signatures. Instead of accepting an entire User object when a function only needs the name and email, you can type the parameter as Pick<User, "name" | "email">. This makes the function's data requirements explicit and prevents accidental reliance on other fields.

Pick pairs naturally with Omit. Where Pick says "give me only these fields," Omit says "give me everything except these fields." Choosing between them depends on whether you're selecting a small subset (use Pick) or excluding a small subset (use Omit) from a larger type.

Related Types

More Mapping Types

Explore TypeScript Types

Browse our complete reference of 30 TypeScript utility types with definitions, examples, and explanations.