API response projections
Expose only an identifier and display name in a list response.
TypeScript · Type Alias
Pick
Pick<Type, Keys> creates a type containing only the properties named by Keys from Type. It is available globally and supports a single property name or a union of property names.
- Since
- 2.1
How it works
Pick constructs a new object type from an existing type by retaining only the properties named by its second type argument. The selected names must be string literals or a union of string literals that identify properties in the source type.
Syntax
Pick<Type, Keys>Parameters
| Name | Type | Description |
|---|---|---|
Type | type | The source object type whose properties are candidates for selection. |
Keys | string literal or union of string literals | A string literal or union of string literals naming properties to retain. |
Returns
A type containing the selected properties from Type.
Key points
- It derives a new object type containing only the chosen properties.
- The second type argument names one property or a union of property names.
- Pick can be used without importing it from a module.
- The documentation identifies TypeScript 2.1 as the release that introduced Pick.
Common mistakes
- The property selector is restricted to string literal names or unions of those names.
Example: Selecting properties from an object type
type User = {
id: string;
name: string;
email: string;
active: boolean;
};
type UserPreview = Pick<User, "id" | "name">;
const preview: UserPreview = {
id: "u-1",
name: "Ada",
};
console.log(preview);Creates a smaller view of User containing only the selected id and name properties.
When to use it
UI-specific props
Define component props from a larger domain model.
Derived views
Create a lightweight object shape for summaries or previews.
Interview questions
QWhat does Pick do?
Pick<Type, Keys> creates a type containing only the properties listed by Keys from Type. Keys can be a string literal or a union of string literals.
Follow-up: How would you select several fields? Use a union such as Pick<User, "id" | "name">, which retains both properties.
QWhy use Pick instead of declaring a second object type?
It is useful when a larger model contains more data than a particular API response or component should expose. The resulting type is derived from the original type rather than rewritten manually.
Follow-up: What maintenance benefit follows? Changes to the selected properties in the source type flow into the picked type.
QHow is Pick declared and made available?
Pick is available globally as a TypeScript utility type, so it does not require an import. Its documented form is Pick<Type, Keys>.
Follow-up: When was it introduced? The documentation marks Pick as released in TypeScript 2.1.
Related
PartialReadonlyRecordOmit