Difference between const and readonly in typescript

Question

Constant vs readonly in typescript

Declaring a variable as readonly will not allow us to override even if they are public properties.

How const behaves,

const SOME_VARIABLE:number = 10; 

If I override its value, how will it work?

Answer 1

A const variable cannot be re-assigned, just like a readonly property.

Essentially, when you define a property, you can use readonly to prevent re-assignment. This is actually only a compile-time check.

When you define a const variable (and target a more recent version of JavaScript to preserve const in the output), the check is also made at runtime.

So they effectively both do the same thing, but one is for variables and the other is for properties.

const x = 5;  // Not allowed x = 7;   class Example {     public readonly y = 6; }  var e = new Example();  // Not allowed e.y = 4; 

Important note... "cannot be re-assigned" is not the same as immutability.

const myArr = [1, 2, 3];  // Not allowed myArr = [4, 5, 6]  // Perfectly fine myArr.push(4);  // Perfectly fine myArr[0] = 9; 

Answer 2

One of the key difference between const and readonly is in how it works with the array. (appart form already ans diff) You have to use

readonly Array<T>  

while working with Array, where T is generic type(google it for more).

when u declare any array as const, you can perform operations on array which may change the array elements. for ex.

const Arr = [1,2,3];  Arr[0] = 10;   //OK Arr.push(12); // OK Arr.pop(); //Ok  //But Arr = [4,5,6] // ERROR 

But in case of readonly Array you can not change the array as shown above.

arr1 : readonly Array<number> = [10,11,12];  arr1.pop();    //ERROR arr1.push(15); //ERROR arr1[0] = 1;   //ERROR