- Abstract class
- Annotations
- Array
- Asserts
- Casting
- Class
- Conditional types
- Const
- Date object
- Decorators
- Default parameter
- Dictionary
- Enum
- Exclude type
- Extract type
- For loop
- forEach()
- Function
- Generics
- Index signature
- Infer
- Inheritance
- Interface
- Keyof type operator
- Let
- Map type
- Mixin
- Module
- Namespace
- Never
- Object type
- Omit type
- Operator
- Optional parameter
- Partial type
- Pick type
- Promise
- Property
- Readonly type
- Record type
- Required type
- Satisfies operator
- Tuples
- Type alias
- Type assertion
- Type guard
- Type narrowing
- Typeof Type Operator
- Union
- Utility types
- Var
- Void
TYPESCRIPT
TypeScript Pick Type: Syntax, Use Cases, and Examples
The Pick utility type allows you to extract a subset of properties from an existing type. It's ideal when you want to reuse part of a defined structure, limiting the type to only the fields you need. Using Pick improves code clarity and type safety while helping to avoid redundant type declarations.
What Is TypeScript Pick?
The Pick utility type creates a new type by selecting one or more properties from an existing type. Instead of redefining a new type from scratch, you can extract just the needed keys from another type.
This is useful when you only need a small portion of a large type in a particular context, such as UI rendering, form submission, or API input validation.
Pick Syntax
The syntax for Pick looks like this:
Pick<Type, Keys>
Type
is the original type you want to extract from.Keys
is a union of property names to include in the new type.
Example:
type User = {
id: number;
name: string;
email: string;
password: string;
};
type PublicUser = Pick<User, 'id' | 'name' | 'email'>;
In this case, PublicUser
will include only the id
, name
, and email
fields from the original User
type, omitting password
.
Why Use the Pick Type?
Using Pick helps avoid unnecessary duplication of types. You don’t need to manually define a partial copy of a type for every use case. Instead, you can reuse and customize your types in a consistent and reliable way.
This approach is particularly useful in large codebases where objects are passed across layers—backend, frontend, APIs, and UI components. If a shape changes in the source type, all dependent Pick types will reflect the change, reducing the risk of mismatch and runtime bugs.
It also improves autocomplete suggestions and compiler checks in your editor, making development faster and safer.
Pick Type Example
Suppose you have a Product
type:
type Product = {
id: string;
name: string;
price: number;
inventory: number;
supplier: string;
};
type ProductSummary = Pick<Product, 'id' | 'name' | 'price'>;
Now ProductSummary
contains only the fields needed for a quick summary display, while still being type-safe and automatically synced with the Product
definition.
How to Use Pick for UI Components
In frontend frameworks like React, components often don’t need access to the full data object. Pick lets you define more concise prop types.
type Post = {
id: number;
title: string;
content: string;
author: string;
createdAt: Date;
};
type PostCardProps = Pick<Post, 'id' | 'title' | 'author'>;
function PostCard(props: PostCardProps) {
return (
<div>
<h2>{props.title}</h2>
<p>By {props.author}</p>
</div>
);
}
Here, PostCard
only knows about and uses the fields relevant to its presentation. This limits surface area, reduces potential bugs, and enhances clarity.
Using Pick with Generics
You can dynamically use Pick with generic types to create flexible utility functions.
function pluck<T, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> {
const result = {} as Pick<T, K>;
for (const key of keys) {
result[key] = obj[key];
}
return result;
}
const user = { id: 1, name: 'Alice', email: 'alice@example.com' };
const picked = pluck(user, ['id', 'email']); // { id: 1, email: 'alice@example.com' }
This example shows how Pick can be leveraged programmatically to work with dynamic keys while maintaining full type safety.
Pick vs Omit
While Pick selects fields from a type, Omit removes them. These two utility types serve opposite but complementary purposes.
- Use
Pick
when you know the specific fields you want to retain. - Use
Omit
when you know which fields you want to exclude.
Example Comparison:
type User = {
id: number;
name: string;
email: string;
password: string;
};
type PickedUser = Pick<User, 'id' | 'name'>;
type OmittedUser = Omit<User, 'email' | 'password'>;
Both PickedUser
and OmittedUser
produce similar results but are approached from different directions.
Combining Pick with Other Utility Types
You can use Pick
in combination with other TypeScript utilities like Partial
, Readonly
, or Omit
to model complex types.
Pick + Partial
type Settings = {
theme: string;
notifications: boolean;
location: string;
};
type OptionalSettings = Partial<Pick<Settings, 'notifications' | 'location'>>;
This creates a type where notifications
and location
are optional, and theme
is excluded altogether.
Combining Pick
with other utilities helps tailor types precisely to the needs of each function, component, or module.
Nested Pick Workaround
TypeScript's built-in Pick only works at the top level. To perform a nested pick (for example, picking keys from an inner object), you'll need to combine types manually.
type User = {
id: number;
profile: {
name: string;
age: number;
bio: string;
};
};
type UserProfileName = {
profile: Pick<User['profile'], 'name'>;
};
In this example, we manually pick from the nested profile
type and then compose a new object structure around it. While there is no built-in deep pick, custom utility types or libraries like type-fest
can help.
Real-World Use Cases for Pick
The Pick utility is widely used across application layers:
- APIs: Build request and response types by picking only relevant fields from domain models.
- Forms: Use
Pick
to limit editable fields in form values. - Components: Pass down only the props needed for rendering.
- Security: Exclude sensitive fields and pick only public ones for data exposure.
- Testing: Mock simplified versions of types by picking only necessary fields.
Using Pick consistently can help maintain a clean architecture where data models don’t leak more information than necessary.
IDE Benefits and Type Inference
Using Pick improves developer productivity with better IDE support. Editors like VS Code provide:
- Autocompletion based on selected fields.
- Type-checking for missing or mismatched fields.
- Refactoring support—renaming a field in the original type automatically updates all Pick references.
These benefits reduce bugs and increase confidence when refactoring or expanding the application.
Summary
The Pick utility type is a powerful and flexible tool for creating custom, lightweight types based on existing structures. By using Pick, you can extract only the fields you need, avoiding redundant definitions and improving type safety across your codebase.
It simplifies component props, API models, and utility functions by keeping types focused and maintainable. You can combine Pick
with other utilities like Partial
, Omit
, and generics for even more powerful use cases. From static models to dynamic transformations, the Pick
utility helps you write cleaner and more expressive TypeScript code.
Sign up or download Mimo from the App Store or Google Play to enhance your programming skills and prepare for a career in tech.