- 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 TypeScript 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 TypeScript
improves code clarity and type safety while helping to avoid redundant type declarations.
In this comprehensive guide, you’ll learn how to use TypeScript Pick
, why it’s useful, and how it compares to other utility types. You’ll also explore practical examples, including nested picks, dynamic usage with generics, and combining Pick
with other types for precise data modeling.
What Is TypeScript Pick?
The Pick
utility type in TypeScript 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.
Syntax of Pick TypeScript
The syntax for TypeScript 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 TypeScript Pick Type?
Using pick TypeScript
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.
TypeScript 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 in TypeScript 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 in TypeScript
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 TypeScript 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 TypeScript
The TypeScript 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 TypeScript
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 TypeScript pick
utility type is a powerful and flexible tool for creating custom, lightweight types based on existing structures. By using pick TypeScript
, 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.