Pick en TypeScript: seleccionar propiedades de un tipo

Pick<T, K> es un utility type integrado que crea un tipo objeto solo con las propiedades de T nombradas en K. Úsalo cuando una función o un componente necesita unos pocos campos de un tipo más grande:

interface User {
  id: number;
  name: string;
  email: string;
  passwordHash: string;
  lastLogin: string;
}

type UserPreview = Pick<User, "id" | "name">;
// { id: number; name: string }

function renderPreview(user: UserPreview): string {
  return `#${user.id} ${user.name}`;
}

const ada: User = {
  id: 1, name: "Ada", email: "ada@example.com",
  passwordHash: "x9f...", lastLogin: "2024-03-15",
};

console.log(renderPreview(ada));                  // #1 Ada
console.log(renderPreview({ id: 2, name: "Linus" })); // #2 Linus

renderPreview acepta un User completo y también un objeto { id, name } sin más, porque solo pide lo que usa. Eso hace que sea más fácil de llamar y de probar. Pick solo afecta a los tipos: el objeto ada completo sigue teniendo sus cinco propiedades en ejecución.

Sintaxis y comprobación de claves

Pick<Type, Keys>

Keys es una sola clave o una unión de claves, y cada una tiene que existir en Type. La definición de la librería estándar de TypeScript lo convierte en una restricción:

type Pick<T, K extends keyof T> = {
  [P in K]: T[P];
};

Gracias a K extends keyof T, una clave mal escrita o inexistente es un error de compilación, y tu editor puede autocompletar los nombres de las claves:

interface Product {
  sku: string;
  title: string;
  price: number;
  stock: number;
}

type PriceTag = Pick<Product, "title" | "price">;

const tag: PriceTag = { title: "Lamp", price: 39 };
console.log(`${tag.title}: $${tag.price}`); // Lamp: $39

// @ts-expect-error: Type '"cost"' does not satisfy the constraint 'keyof Product'
type Broken = Pick<Product, "cost">;

El error es error TS2344: Type '"cost"' does not satisfy the constraint 'keyof Product'. Es una diferencia con Omit, cuyas claves no se comprueban.

Pick conserva readonly y opcional

Pick recorre claves de T, así que cada propiedad seleccionada conserva sus modificadores:

interface Account {
  readonly id: number;
  email?: string;
  plan: "free" | "pro";
}

type AccountRef = Pick<Account, "id" | "email">;
// { readonly id: number; email?: string }

const ref: AccountRef = { id: 7 }; // email is still optional
// @ts-expect-error: Cannot assign to 'id' because it is a read-only property
ref.id = 8;

console.log(ref); // { id: 8 }

La última línea muestra { id: 8 } porque readonly es solo una comprobación de compilación: la asignación se detectó, se suprimió con @ts-expect-error y aun así se ejecutó. Para cambiar los modificadores al seleccionar, envuelve el resultado: Partial<Pick<Account, "plan">> o Required<Pick<Account, "email">>.

Pick frente a Omit

Pick nombra lo que se conserva; Omit, lo que se descarta. Hoy los dos dan el mismo resultado, pero se comportan distinto cuando crece el tipo de origen:

interface Order {
  id: number;
  total: number;
  cardLast4: string;
  // added later: internalNotes: string;
}

type Receipt = Pick<Order, "id" | "total">;   // stays { id; total }
type AdminView = Omit<Order, "cardLast4">;    // will include internalNotes too

const receipt: Receipt = { id: 1, total: 49.9 };
const admin: AdminView = { id: 1, total: 49.9 };
console.log(receipt, admin); // { id: 1, total: 49.9 } { id: 1, total: 49.9 }

Para los datos que salen de tu servidor, Pick es la opción más segura por defecto: nada aparece en el tipo salvo que alguien lo haya añadido a propósito.

Seleccionar de tipos anidados

Pick solo ve las claves del primer nivel: una ruta con puntos como Pick<Customer, "address.city"> es un error (TS2344), no una selección anidada. Usa un indexed access type para llegar al tipo anidado y selecciona de él:

interface Customer {
  id: number;
  name: string;
  address: {
    street: string;
    city: string;
    country: string;
  };
}

type City = Pick<Customer["address"], "city">; // { city: string }

// Keep the shape, trim the nested object
type ShippingLabel = Pick<Customer, "name"> & {
  address: Pick<Customer["address"], "city" | "country">;
};

const label: ShippingLabel = {
  name: "Ada",
  address: { city: "London", country: "UK" },
};

const city: City = { city: label.address.city };
console.log(label, city.city);
// { name: 'Ada', address: { city: 'London', country: 'UK' } } London

Customer["address"] es el tipo de la propiedad address. La misma sintaxis llega a los elementos de un array: para una propiedad orders: Order[], Customer["orders"][number] es Order.

Una función pick() tipada

Pick no hace nada en ejecución. Una pequeña función genérica copia las propiedades elegidas en un objeto nuevo y devuelve exactamente Pick<T, K>:

function pick<T extends object, 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 book = { id: 3, title: "Dune", author: "Herbert", pages: 412 };

const summary = pick(book, "title", "author"); // { title: string; author: string }
console.log(summary);          // { title: 'Dune', author: 'Herbert' }
console.log(Object.keys(summary)); // [ 'title', 'author' ]
// pick(book, "isbn") would be error TS2345: Argument of type '"isbn"' is not assignable
// to parameter of type '"author" | "id" | "pages" | "title"'.

K extends keyof T permite que TypeScript infiera K a partir de los argumentos string, así que el tipo de retorno tiene exactamente las claves seleccionadas. La aserción {} as Pick<T, K> hace falta porque un objeto vacío todavía no tiene esas propiedades; el bucle las rellena.

Seleccionar propiedades por el tipo de su valor

Pick selecciona por nombre de clave. Para seleccionar por el tipo de la propiedad, por ejemplo «todos los campos string», escribe un mapped type con un filtro de claves:

type PickByValue<T, V> = {
  [P in keyof T as T[P] extends V ? P : never]: T[P];
};

interface Article {
  id: number;
  title: string;
  slug: string;
  views: number;
  published: boolean;
}

type TextFields = PickByValue<Article, string>;   // { title: string; slug: string }
type NumberFields = PickByValue<Article, number>; // { id: number; views: number }

const text: TextFields = { title: "Hello", slug: "hello" };
const nums: NumberFields = { id: 1, views: 120 };
console.log(text, nums); // { title: 'Hello', slug: 'hello' } { id: 1, views: 120 }

La cláusula as convierte cada clave en sí misma cuando su tipo encaja y en never en caso contrario, y las claves never se descartan. Un detalle: el tipo de una propiedad opcional incluye undefined, así que un subtitle?: string opcional no contaría aquí como string; compara con string | undefined para incluirlo.