ProgrammationDéveloppeur Frontend

Parlez-nous du mot-clé 'readonly' en TypeScript. Comment et quand doit-il être appliqué? Quelles sont ses particularités par rapport à const?

Réussissez les entretiens avec l'assistant IA Hintsage

Réponse.

Le mot-clé readonly en TypeScript est utilisé pour les propriétés des objets et des tableaux, afin d'interdire leur modification après initialisation:

  • Il est utilisé dans la définition d'interfaces, de types et de classes pour empêcher la modification de la valeur d'un champ après son attribution.
  • readonly s'applique uniquement aux propriétés des objets, et non aux variables.
  • Contrairement à const, qui indique qu'une variable ne peut pas être réassignée mais ne prohibe pas la modification du contenu de l'objet, readonly interdit spécifiquement la modification du champ ou de l'élément du tableau.

Exemple :

interface User { readonly id: number; name: string; } const user: User = { id: 1, name: 'Anna' }; user.id = 2; // Erreur : Impossible d'assigner à 'id' car c'est une propriété en lecture seule.

Pour les tableaux :

const nums: readonly number[] = [1, 2, 3]; nums.push(4); // Erreur : La propriété 'push' n'existe pas sur le type 'readonly number[]'.

Question piège.

Quelle est la différence entre const et readonly en TypeScript ? Peuvent-ils se remplacer mutuellement ?

Réponse : Non, ils ne peuvent pas. const est une restriction sur la variable elle-même (elle ne peut pas être réassignée), tandis que readonly est une restriction sur des propriétés spécifiques de l'objet ou des éléments du tableau, mais la variable elle-même peut être modifiée (si cela est permis par le contexte).

Exemple :

const arr: readonly number[] = [1, 2, 3]; // arr = [2, 3, 4]; // Erreur à cause de const // arr[0] = 5; // Erreur à cause de readonly

Histoire

Dans un projet pour une plateforme financière, lors du traitement des données des utilisateurs, des tableaux ordinaires number[] ont été utilisés à la place de readonly number[]. Cela a entraîné un accident où une fonction a modifié les données d'entrée — les valeurs des sommes dans les tableaux étaient utilisées à différents endroits, ce qui a conduit à des incohérences dans les rapports. L'erreur a été découverte après plusieurs jours, ce qui a coûté à l'entreprise du temps pour un audit et une récupération des données.


Histoire

Dans une API interne, const et readonly ont été confondus, pensant que const user: User empêcherait la modification des champs. En conséquence, il était possible de modifier les champs de l'objet, bien que cela soit inacceptable selon les spécifications. En raison de l'ignorance de la différence, des fuites de données confidentielles ont eu lieu entre les services.


Histoire

Dans le cadre d'une bibliothèque open source, une des structures de données a accidentellement été rendue mutable, car le readonly avait été omis dans la définition de l'interface. Cela a permis à des développeurs tiers de modifier des données privées à l'exécution, provoquant des bugs qui ont nécessité un refactoring pour être corrigés.