The TypeScript Pick utility type

Kenny DuMez
Kenny DuMez
Graphite software engineer

TypeScript's Pick utility allows you to create new types by picking a set of properties from an existing type. This is useful when you need to create a simplified version of a type with only a few properties from a larger type. This guide will explore how to use the Pick utility effectively, compare it with Omit, and apply it to various scenarios, including creating a date picker in TypeScript.

The Pick type is a utility in TypeScript that constructs a new type by picking a set of properties from an existing type. The syntax for Pick is:

Terminal
Pick<Type, Keys>
  • Type is the original type you are modifying.
  • Keys is the property or properties to pick from the Type.

Here’s a step-by-step process on how to use Pick:

  1. Picking a single property:

    • Suppose you have a type Person and you want to create a new type that includes only the name property:

      Terminal
      type Person = {
      name: string
      age: number
      email: string
      }
      type JustName = Pick<Person, 'name'>
    • JustName will have only the name property.

  2. Picking multiple properties:

    • To pick more than one property, you can list them in the Pick utility separated by pipes (|):

      Terminal
      type NameAndEmail = Pick<Person, 'name' | 'email'>
    • This will create a type that includes both the name and email properties.

  3. Using Pick in functions:

    • Pick is useful in functions where you want to ensure certain properties are passed:

      Terminal
      function sendEmail(person: Pick<Person, 'email'>) {
      // function body
      }
    • This function will accept an object that must include the email property.

  • Usage:

    • Pick and Omit are complementary utilities in TypeScript. Pick is used when you know which properties you want to include, while Omit is used when you know which properties you want to exclude.
  • Example:

    Terminal
    // Using Pick
    type PickedPerson = Pick<Person, 'name' | 'email'>
    // Using Omit
    type OmittedPerson = Omit<Person, 'age'>

    Both PickedPerson and OmittedPerson will result in an object type that includes the name and email properties, but the approach differs based on whether you are excluding or including properties explicitly.

If you are working on a project that requires a date picker, you can define its type using Pick to simplify the integration with other types. For instance:

Terminal
interface DatePickerProps {
value: Date
onChange: (date: Date) => void
}
// Using Pick to create a simplified DatePicker type
type SimpleDatePicker = Pick<DatePickerProps, 'value' | 'onChange'>
function DatePicker({ value, onChange }: SimpleDatePicker) {
// DatePicker implementation
}

This example picks only the essential properties from a more complex DatePickerProps type to create a simplified SimpleDatePicker type, which can be easier to handle in small components or utilities.

For further reading on the TypeScript Pick utility see the official documentation.

On this page
Stay unblocked. Ship faster.
Experience the new developer workflow - create, review, and merge code continuously. Get started with one command.
Get started

Give your PR workflow
an upgrade today

Stack easier | Ship smaller | Review quicker

Or install our CLI.
Product Screenshot 1
Product Screenshot 2