ProgrammationDéveloppeur Frontend

Comment fonctionne Pick en TypeScript, à quoi sert ce type utilitaire et quelle est sa différence avec Omit ?

Réussissez les entretiens avec l'assistant IA Hintsage

Réponse.

Le type utilitaire Pick<T, K> a été ajouté à TypeScript pour résoudre le problème de la copie sélective de certaines propriétés d'un type ou d'une interface existante.

Historique de la question

Souvent, au cours du développement, les mêmes structures de données sont réutilisées avec des variations mineures. Avant l'apparition de Pick, il fallait créer de nouvelles interfaces en copiant manuellement les propriétés souhaitées, ce qui entraînait une duplication de code et des erreurs lors des modifications ultérieures des structures d'origine.

Problème

Il est nécessaire de typer les entrées ou les sorties d'une fonction en n'utilisant qu'une partie des propriétés d'une grande interface, afin d'éviter la redondance et de préciser au maximum le contrat.

Solution

Pick résout le problème d'extraction d'un sous-ensemble de propriétés du type T par les clés K :

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

Exemple:

interface User { id: number; name: string; email: string; } type Credentials = Pick<User, 'email' | 'name'>; const creds: Credentials = { email: "user@example.com", name: "User Name", };

Caractéristiques clés :

  • Crée un nouveau type avec uniquement les clés nécessaires;
  • Très pratique pour typer des requêtes select, des formulaires, des sorties;
  • Minimiser la quantité de code manuel et les erreurs lors du refactoring.

Questions pièges.

Quelle est la différence entre Pick et Omit ?

Pick choisit uniquement les propriétés spécifiées du type ; Omit, au contraire, les exclut de la structure.

type PartialUser = Omit<User, 'id'>; // Toutes les propriétés sauf id

Est-il possible d'utiliser Pick pour sélectionner une propriété inexistante ?

Non, les clés K doivent obligatoirement être des clés du type d'origine, sinon une erreur de compilation se produira.

Pick peut-il influencer l'optionnalité ou les propriétés readonly ?

Pick conserve les modificateurs de propriété (optionnel, readonly), s'ils étaient présents dans le type d'origine, il les copie simplement dans le nouveau.

Erreurs typiques et anti-modèles

  • Énumération dans Pick sous forme de chaîne explicite ("id, name") au lieu d'un tableau de clés, ce qui entraîne des erreurs de compilation.
  • Sélection de propriétés inexistantes ou génération automatique incorrecte des clés.
  • Utilisation de Pick là où une exclusion ou modification de propriétés est requise — c'est pour cela qu'il existe Omit, Partial, Required.

Exemple de la vie réelle

Cas négatif

Lors de la création d'un formulaire de saisie, le développeur a décrit son propre type manuellement, oubliant un nouvel attribut requis ajouté dans User. Le formulaire a échoué après la mise à jour de l'interface.

Avantages :

  • Description explicite de la structure.

Inconvénients :

  • Risque de désuétude du typedef, forte probabilité de bogues lors du refactoring.

Cas positif

Utilisation de Pick pour extraire les propriétés nécessaires du formulaire :

type FormFields = Pick<User, 'email' | 'name'>;

Les modifications dans User se reflètent automatiquement dans le formulaire.

Avantages :

  • Synchronisation des types garantie.

Inconvénients :

  • Doit être contrôlé pour ne pas sélectionner des propriétés supplémentaires qui ne sont pas prises en charge par la logique métier du formulaire.