Pick
Build a new type from a subset of another type's properties.
Syntax
Pick<User, "name" | "email">Pick<T, Keys> creates a new type containing only the properties you name. It is handy for creating focused views of a larger type.
Reading it
Pick<User, "name"> is a type with just the name property from User.
Example
Loading editor…
Press Run to execute the code.
When to use it
- A list view component uses Pick<User, 'id' | 'name'> to receive only the minimal fields it needs to render.
- An API response builder uses Pick to expose a subset of internal model fields to external consumers.
- A form is typed as Pick<Product, 'name' | 'price'> to restrict which fields can be edited by the UI.
More examples
Pick a subset of properties
Pick<User, ...> constructs a type with only the three specified properties, excluding the sensitive password field.
interface User {
id: number;
name: string;
email: string;
password: string;
}
type PublicUser = Pick<User, 'id' | 'name' | 'email'>;
function getPublicProfile(user: User): PublicUser {
const { id, name, email } = user;
return { id, name, email };
}Pick for a view model
Creates a ProductCard view model with only the display fields, hiding internal fields like stockLevel and supplierId.
interface Product {
sku: string;
name: string;
price: number;
stockLevel: number;
supplierId: number;
}
type ProductCard = Pick<Product, 'sku' | 'name' | 'price'>;
function renderCard(p: ProductCard): string {
return `${p.name} — $${p.price}`;
}Generic pick utility
Implements a runtime select function whose return type uses Pick<T, K> so the extracted shape is precisely typed.
function select<T, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> {
const result = {} as Pick<T, K>;
keys.forEach((k) => { result[k] = obj[k]; });
return result;
}
const user = { id: 1, name: 'Alice', email: '[email protected]', role: 'admin' };
const slim = select(user, ['id', 'name']); // { id: number; name: string }
Discussion