111 votes

Différence entre const et readonly dans les scripts.

Constant vs readonly dans les scripts

Déclarer une variable comme readonly ne nous permettront pas de les remplacer, même s'il s'agit de propriétés publiques.

Comment se comporte la constance,

const SOME_VARIABLE:number = 10;

Si je modifie sa valeur, comment cela fonctionnera-t-il ?

3 votes

Voir aussi en lecture seule, différence avec const (livre TypeScript Deep Dive).

6 votes

144voto

Steve Fenton Points 55265

A const ne peut pas être réaffectée, tout comme une variable readonly propriété.

Essentiellement, lorsque vous définissez une propriété, vous pouvez utiliser les éléments suivants readonly pour empêcher la réaffectation. Il s'agit en fait d'une vérification au moment de la compilation.

Lorsque vous définissez un const (et ciblez une version plus récente de JavaScript pour préserver la variable const dans la sortie), la vérification est également effectuée au moment de l'exécution.

Ils font donc tous deux la même chose, mais l'un concerne les variables et l'autre les propriétés.

const x = 5;

// Not allowed
x = 7;

class Example {
    public readonly y = 6;
}

var e = new Example();

// Not allowed
e.y = 4;

Note importante... "ne peut être réaffecté" n'est pas la même chose que l'immuabilité.

const myArr = [1, 2, 3];

// Not allowed
myArr = [4, 5, 6]

// Perfectly fine
myArr.push(4);

// Perfectly fine
myArr[0] = 9;

3 votes

Je suis confus avec ceci // Perfectly fine myArr[0] = 9; . Comment pouvez-vous dire que c'est une constante alors ?

69 votes

@Aravind Un tableau en JS/TS est un objet mutable. Donc myArr est une référence constante à un objet mutable. Vous ne pouvez pas le pointer vers un autre tableau, mais vous pouvez modifier le contenu du tableau. Vous ( myArr ) ont pris une boîte ( [1, 2, 3] ) et collé sur vos mains ( const ). La colle signifie que vous ne pouvez pas la laisser partir et prendre une autre boîte ( myArr = [4, 5, 6] ) ou autre chose ( myArr = 'something else' ). Mais la colle n'empêche pas quelqu'un de mettre quelque chose dans la boîte ( myArr.push(4) ) ou le remplacement de certains de ses contenus ( myArr[0]=9 ).

0 votes

Et la même chose qu'avec Array se produit avec Object ... C'est notre responsabilité de les rendre inmutables - ils ne le sont PAS.

32voto

niranjan harpale Points 304

L'une des principales différences entre const et readonly réside dans la façon dont ils fonctionnent avec le tableau. (à part une différence déjà existante) Vous devez utiliser ReadonlyArray lorsque vous travaillez avec un tableau, où T est un type générique (google pour en savoir plus).

Lorsque vous déclarez un tableau comme const, vous pouvez effectuer des opérations sur le tableau qui peuvent changer les éléments du tableau. par exemple.

const Arr = [1,2,3];

Arr[0] = 10;   //OK
Arr.push(12); // OK
Arr.pop(); //Ok

//But
Arr = [4,5,6] // ERROR

Mais dans le cas de ReadonlyArray, vous ne pouvez pas modifier le tableau comme indiqué ci-dessus.

arr1 : ReadonlyArray<number> = [10,11,12];

arr1.pop();    //ERROR
arr1.push(15); //ERROR
arr1[0] = 1;   //ERROR

19 votes

Je ne pense pas que cela soit réellement pertinent pour la question qui nous occupe (mot-clé "readonly" contre mot-clé "const"), même si je ne savais pas que ReadonlyArray existait.

3 votes

Mais la réponse correspond au comportement réel des mots-clés readonly VS const. Avec le readonly, vous ne pouvez modifier en aucune façon l'objet/le tableau et les propriétés/éléments de l'objet/du tableau. Il est utilisé principalement dans les systèmes de gestion d'état dans lesquels nous voulons modifier les valeurs uniquement à partir de collections de fonctions pures, et nulle part ailleurs.

3 votes

Ce n'est pas directement lié à la question posée, mais j'apprécie les informations supplémentaires.

19voto

user1660210 Points 91

Les deux :

  • peut être modifié (par exemple par .push() if array)

const :

  • ne peut pas être réaffecté
  • utilisé pour les variables

en lecture seule :

  • peut être réaffecté mais seulement à l'intérieur du constructeur
  • utilisé pour les propriétés (membre de la classe)

9voto

alfasin Points 19063
  1. Je pense que la réponse acceptée ne mettait pas assez l'accent sur le fait que const est censé être utilisé avec des variables tandis que readonly avec des propriétés de classe/interface.

  2. readonly n'est vérifié que lors de la vérification de type (au moment de la compilation) alors que const est vérifié pendant l'exécution

  3. déclarer une propriété comme étant readonly ne signifie pas que sa valeur ne peut pas être modifiée : cela signifie que la propriété ne peut pas être réaffectée, par exemple :


interface Person {
    readonly info: { name: string; age: number };
}

//create a new person
// ...

person.info.age += 1; // this is valid
person.info = { name: "Johnny", age: 15 }; // this is invalid!
  1. Depuis TS 3.4, il y a assertions constantes qui sont utilisés pour définir types :

// Type 'readonly [10, 20]'
let y = [10, 20] as const;

// Type '{ readonly text: "hello" }'
let z = { text: "hello" } as const;

Pour en savoir plus, voir les docs

7voto

Stef Points 113

Comme dit dans https://www.typescriptlang.org/docs/handbook/interfaces.html#readonly-vs-const

Le moyen le plus simple de savoir s'il faut utiliser readonly ou const est de se demander si on l'utilise sur une variable ou une propriété. Les variables utilisent const alors que les propriétés utilisent readonly.

comme il est affiché dans l'image ci-dessous si vous déclarez const dans la définition d'une propriété vous obtiendrez une erreur https://i.imgur.com/cJfDqh9.png

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X