ProgrammationDéveloppeur Frontend

Comment fonctionne le mécanisme d'accès aux propriétés optionnelles (Optional Properties) dans TypeScript, quels problèmes peut-on rencontrer et comment les éviter ?

Réussissez les entretiens avec l'assistant IA Hintsage

Réponse.

Les propriétés optionnelles dans TypeScript sont indiquées par un point d'interrogation (?) après le nom de la propriété. Cela signifie que la propriété peut être soit définie, soit absente dans l'objet. C'est pratique pour décrire des structures où tous les champs ne sont pas obligatoires.

Exemple:

interface User { id: number; name?: string; } const u1: User = { id: 1 }; // OK const u2: User = { id: 2, name: 'Ivan' }; // OK

Subtilités:

  • Une propriété optionnelle peut être non seulement undefined, mais totalement absente de l'objet.
  • La vérification de la présence d'une valeur (par exemple, if (user.name)) ne distingue pas undefined de l'absence.
  • Un bogue fréquent est de ne pas tenir compte du fait que la propriété peut être undefined et d'appeler des méthodes/propriétés sans vérification.

Pour se protéger :

  • Utilisez des vérifications pour undefined :
if (user.name !== undefined) { console.log(user.name.toUpperCase()); }
  • Vous pouvez utiliser l'opérateur de chaînage optionnel :
console.log(user.name?.toUpperCase());

Question piège.

Si un objet est décrit par l'interface { foo?: string }, la propriété foo peut-elle toujours être uniquement une chaîne ou undefined ? Peut-on y assigner, par exemple, la valeur null ?

Mauvaise réponse:

  • "Une propriété optionnelle ne peut être qu'une chaîne ou undefined, rien d'autre."

Bonne réponse:

  • En réalité, si vous assignez explicitement null, TypeScript le permet, mais uniquement si le type est élargi à string | null. Par défaut, seul string ou undefined est autorisé.
  • Exemple:
interface A { foo?: string } let x: A = { foo: null }; // Erreur !

Exemples d'erreurs réelles dues à la méconnaissance des subtilités du sujet.


Histoire

Dans un grand projet, une partie des objets arrivait du serveur sans certains champs optionnels. Un programmeur appelait directement des méthodes sur ces propriétés (par exemple, toLowerCase()), ce qui entraînait des erreurs d'exécution si le champ était absent. Pour résoudre le problème, l'équipe a implémenté des vérifications strictes et des règles de linter pour l'accès aux champs optionnels.


Histoire

Dans des expressions logiques, on confondait la présence de la propriété et sa véracité : if (user.email) ne fonctionnait pas pour des chaînes vides, bien que la propriété soit définie. Cela a causé un bogue, entraînant la non-envoi de certaines notifications aux utilisateurs.


Histoire

L'équipe a décidé d'assigner la valeur null à une propriété optionnelle, pensant que c'était correct. TypeScript a généré une erreur, et pour contourner cela, il a fallu élargir le type à string | null, ce qui a nécessité une révision de toute la logique métier relative à ces objets.