Pick em TypeScript: selecionar propriedades de um tipo

Pick<T, K> é um utility type embutido que cria um tipo de objeto só com as propriedades de T citadas em K. Use-o quando uma função ou um componente precisa de alguns campos de um tipo maior:

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 aceita um User completo e também um objeto simples { id, name }, porque pede só o que usa. Isso a torna mais fácil de chamar e de testar. Pick existe só nos tipos: o objeto ada completo continua tendo as cinco propriedades em tempo de execução.

Sintaxe e verificação das chaves

Pick<Type, Keys>

Keys é uma única chave ou uma union de chaves, e cada uma precisa existir em Type. A definição na biblioteca padrão do TypeScript transforma isso em uma restrição:

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

Por causa de K extends keyof T, uma chave escrita errado ou inexistente é erro de compilação, e o seu editor consegue autocompletar os nomes das chaves:

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">;

O erro é error TS2344: Type '"cost"' does not satisfy the constraint 'keyof Product'. Essa é uma diferença em relação a Omit, cujas chaves não são verificadas.

Pick mantém readonly e opcional

Pick mapeia sobre chaves de T, então cada propriedade selecionada mantém os seus 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 }

A última linha mostra { id: 8 } porque readonly é só uma verificação de tempo de compilação: a atribuição foi apontada, suprimida com @ts-expect-error, e ainda assim foi executada. Para mudar os modificadores ao selecionar, envolva o resultado: Partial<Pick<Account, "plan">> ou Required<Pick<Account, "email">>.

Pick vs Omit

Pick diz o que manter; Omit diz o que descartar. Os dois dão o mesmo resultado hoje, mas se comportam de forma diferente quando o tipo de origem cresce:

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 dados que saem do seu servidor, Pick é o padrão mais seguro: nada aparece no tipo a menos que alguém o tenha adicionado de propósito.

Selecionando de tipos aninhados

Pick só enxerga as chaves do primeiro nível: um caminho com ponto como Pick<Customer, "address.city"> é erro (TS2344), não uma seleção aninhada. Use um indexed access type para chegar ao tipo aninhado e selecione a partir dele:

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"] é o tipo da propriedade address. A mesma sintaxe alcança elementos de arrays: para uma propriedade orders: Order[], Customer["orders"][number] é Order.

Uma função pick() tipada

Pick não faz nada em tempo de execução. Uma pequena função genérica copia as propriedades escolhidas para um objeto novo e retorna exatamente 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 o TypeScript infira K a partir dos argumentos string, então o tipo de retorno tem exatamente as chaves selecionadas. A assertion {} as Pick<T, K> é necessária porque um objeto vazio ainda não tem essas propriedades; o loop as preenche.

Selecionando propriedades pelo tipo do valor

Pick seleciona pelo nome da chave. Para selecionar pelo tipo da propriedade, por exemplo "todos os campos string", escreva um mapped type com um filtro de chaves:

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 }

A cláusula as mapeia cada chave para ela mesma quando o tipo combina e para never caso contrário, e chaves never são descartadas. Um detalhe: o tipo de uma propriedade opcional inclui undefined, então um subtitle?: string opcional não contaria como string aqui; teste contra string | undefined para incluí-lo.