What is Pick in TypeScript? Do you know? 🤔

When you’re building modern web applications in TypeScript, one of your goals should be writing safe, scalable, and maintainable code. A big part of that is mastering TypeScript’s utility types. One of the most useful and often misunderstood is Pick. If you’re new to TypeScript or just haven’t tapped into the full power of its type utilities yet or even if this is the first time you hear about this, don’t worry. You can learn all about Pick in just few minutes. So, Let’s break it all down, starting from the basics.

What is Pick in TypeScript?

Pick is a built-in TypeScript utility type. It lets you create a new type by selecting a subset of properties from an existing type. (If you want to learn about more utility-types in TypeScript such as Partial, Omit, I have article written about this as well. You’ll find them at the end of this article.)

Here’s the syntax:

Pick<Type, Keys>

Let me explain what these mean:

• Type: The existing object type you want to base your new type on.
• Keys: A union of the keys you want to extract.

A Simple Example

type User = {
  id: number;
  name: string;
  email: string;
  isAdmin: boolean;
};

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

const profile: PublicProfile = {
  id: 1,
  name: 'Alice'
};

PublicProfile is now a type that includes only the id and name properties from User. You pick just what you need. It’s as the name implies. This is cleaner and safer than redefining the type manually everytime you need a different type or a different interface.

Why Use Pick ?

Let’s talk some practical benefits:

1. Avoid Code Duplication

You don’t need to retype property definitions. I see people do this a lot in their codebase. I also used to do this before I came across these utility types. But since I found them, my TypeScript codebase has significantly improved in quality. And this has helped reduced a lot of maintenance headaches.

2. Improve Type Safety

By referencing the original type or Shape, Pick ensures consistency even if the base type changes. You might not understand this until you start using this utility type. The consistency is golden.

3. Enable Reusable Components

It’s perfect for reusable components. Say, you need a component that only needs part of a type? Pick lets you craft precise props.

4. Clear Intent

When you use Pick, you’re making it clear to other developers that your new type is a slice of something larger. It’s semantic and very readable.

How to Use Pick Dynamically

You can combine Pick with other utilities to build powerful abstractions. For example:

type KeysToPick = 'email' | 'isAdmin';
type AdminContact = Pick<User, KeysToPick>;

You can even dynamically generate keys with mapped types:

const keys = ['email', 'isAdmin'] as const;
type KeysArray = typeof keys[number];
type AdminContact = Pick<User, KeysArray>;

This is super useful when you’re working with dynamic forms or APIs that need flexible shapes. Please mark this point for your reference.

Let’s go over the Best Practices once more.

1. Use Pick to Build Read-Only Interfaces for UI Components

Keep frontend props tight and clean by sending only what a component needs.

2. Combine with Omit for Precision

Sometimes you need both. If you need to read about omit. Click here to read my article about omit.

type NonSensitiveUser = Omit<User, 'email' | 'isAdmin'>;

3. Use Named Utility Types

Instead of inlining Pick, give it a name like PublicProfile. It improves readability and reusability. Just the like the example I showed above.

4. Pair with keyof to Create Dynamic Helpers

function pluck<T, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> {
  const result = {} as Pick<T, K>;
  keys.forEach((key) => {
    result[key] = obj[key];
  });
  return result;
}

Now you can extract exactly what you need from an object while preserving types.

Visualizing Pick

Here’s a simple visualization to clarify how Pick narrows down an object type.

Original Type:          Picked Type:
-------------------     -------------------
id: number              id: number
name: string    ===>    name: string
email: string
isAdmin: boolean

Conclusion

Pick might seem simple at first glance, but it’s a powerhouse once you understand how to use it effectively. From keeping your code DRY and safe, to enabling flexible, type-safe APIs, it’s a must-have in your TypeScript toolkit. If you’re serious about scaling your TypeScript applications with confidence, clarity and quality, I believe mastering Pick is a step you can’t skip in your journey.

TL;DR of this Article:

• Pick in TypeScript is a utility type used to select specific properties from an object type.
• It helps reduce code duplication and enhances type safety.
• Use Pick with other utilities like Omit and keyof for more powerful patterns.
• Ideal for API models, UI components, and anywhere precise type shaping is needed.

Pick what works best for you from these for your next TypeScript project, or maybe even for your existing project.

Enjoyed This Article?

If this article helped your understanding of Pick, share it with your dev team or TypeScript community.

If you have questions or want deeper dives into other utility types? Leave a comment or reach out.

Follow me for more clear, developer-first TypeScript tutorials, with real-world examples and sharp insights.

Thanks for reading and happy typing. 🙂