Pick en TypeScript : sélectionner des propriétés d'un type

Pick<T, K> est un utility type intégré qui crée un type objet ne contenant que les propriétés de T nommées dans K. Utilisez-le quand une fonction ou un composant a besoin de quelques champs d'un type plus grand :

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 accepte un User complet mais aussi un simple objet { id, name }, car elle ne demande que ce qu'elle utilise. Elle est ainsi plus facile à appeler et à tester. Pick n'existe que dans les types : l'objet ada complet a toujours ses cinq propriétés à l'exécution.

Syntaxe et vérification des clés

Pick<Type, Keys>

Keys est une clé unique ou une union de clés, et chacune doit exister sur Type. La définition dans la bibliothèque standard de TypeScript en fait une contrainte :

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

Grâce à K extends keyof T, une clé mal orthographiée ou absente est une erreur de compilation, et votre éditeur peut compléter automatiquement les noms de clés :

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

L'erreur est error TS2344: Type '"cost"' does not satisfy the constraint 'keyof Product'. C'est une différence avec Omit, dont les clés ne sont pas vérifiées.

Pick conserve readonly et le caractère optionnel

Pick parcourt les clés de T, donc chaque propriété sélectionnée garde ses modificateurs :

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 dernière ligne affiche { id: 8 } parce que readonly n'est qu'une vérification à la compilation : l'affectation a été signalée, l'erreur supprimée avec @ts-expect-error, et le code s'est quand même exécuté. Pour changer les modificateurs en même temps que la sélection, enveloppez le résultat : Partial<Pick<Account, "plan">> ou Required<Pick<Account, "email">>.

Pick vs Omit

Pick nomme ce qu'il faut garder ; Omit nomme ce qu'il faut retirer. Les deux donnent le même résultat aujourd'hui, mais ils se comportent différemment quand le type source grandit :

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 }

Pour des données qui quittent votre serveur, Pick est le choix par défaut le plus sûr : rien n'apparaît dans le type sans que quelqu'un l'ait ajouté volontairement.

Sélectionner dans des types imbriqués

Pick ne voit que les clés de premier niveau : un chemin pointé comme Pick<Customer, "address.city"> est une erreur (TS2344), pas une sélection imbriquée. Utilisez un indexed access type pour atteindre le type imbriqué, puis faites le pick dessus :

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"] est le type de la propriété address. La même syntaxe atteint les éléments d'un tableau : pour une propriété orders: Order[], Customer["orders"][number] vaut Order.

Une fonction pick() typée

Pick ne fait rien à l'exécution. Une petite fonction générique copie les propriétés choisies dans un nouvel objet et renvoie exactement 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 permet à TypeScript d'inférer K à partir des arguments string, donc le type de retour contient exactement les clés choisies. L'assertion {} as Pick<T, K> est nécessaire parce qu'un objet vide n'a pas encore ces propriétés ; la boucle les remplit.

Sélectionner des propriétés selon le type de leur valeur

Pick sélectionne par nom de clé. Pour sélectionner selon le type de la propriété, par exemple « tous les champs string », écrivez un mapped type avec un filtre sur les clés :

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 clause as associe chaque clé à elle-même quand son type correspond, et à never sinon, et les clés never sont supprimées. Une subtilité : le type d'une propriété optionnelle inclut undefined, donc un subtitle?: string optionnel ne compterait pas comme string ici ; testez par rapport à string | undefined pour l'inclure.