The TypeScript Pick utility type

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.

What is TypeScript's Pick utility?

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:

Pick<Type, Keys>

• Type is the original type you are modifying.
• Keys is the property or properties to pick from the Type.

How to use Pick in TypeScript

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.

Omit vs Pick in TypeScript

• 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.

Creating a date picker in TypeScript

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:

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.