Member-only story

Demystifying TypeScript’s Pick Utility Type

Javascript Jeep🚙💨
Frontend Weekly
Published in
2 min readJun 3, 2024
Photo by Masjid Pogung Dalangan on Unsplash

Pick allows you to create a new type by selecting properties from an existing type. It's like handpicking only the properties you need from a larger object. Let's delve into how you to usePick.

Understanding the Basics

Consider a scenario where you have an interface defining a user object:

interface User {
id: number;
name: string;
email: string;
age: number;
}

Now, imagine you want to create a new type that only includes id and name properties from this interface. This is where Pick shines:

type UserPreview = Pick<User, 'id' | 'name'>;

Here, UserPreview is a new type comprising only the id and name properties from the User interface.

Syntax

The syntax for Pick is

type NewType = Pick<ExistingType, Keys>;
  • NewType: This represents the new type that will be created with the chosen properties.
  • ExistingType: This refers to…

--

--

Frontend Weekly
Frontend Weekly

Published in Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Javascript Jeep🚙💨
Javascript Jeep🚙💨

Responses (1)