Difference between const and readonly in typescript/angular

In this post, you will learn a step-by-step tutorial on the difference between the const and readonly keywords in TypeScript and Angular.

You can also check out Typescript final keyword

Difference between const and readonly variables in TypeScript

const is applied to variables only.

Let’s start by declaring a constant-content variable.

const content;

The TypeScript compiler throws a Cannot assign to ‘content’ because it is a constant error. This indicates that constants must be initialized during declaration, as seen below.

const content = "text string";

Attempting to assign a new value to a constant results in an error:

// error
content = "new text";

The compiler throws an error Cannot assign to ‘content’ because it is a constant. Once const variables are declared and initialized, their values cannot be modified.

that means, Once const variables are declared and initialized, values are not modified.

readonly applies to properties of a class.

Let’s declare a readonly property in a class:

class user {
    public readonly property;

Here, the property is declared but not initialized, and no error is thrown. This is a valid case for readonly properties.

Readonly properties can be declared and assigned with a value like constants.

class user {
    public readonly property=11;

Now, let’s create an object of this class and attempt to change the value of the property.

let myuser = new user();
myuser.property = 12;

This will not work, and the compiler gives an error Cannot assign to ‘property’ because it is a read-only.

Difference between const and readonly arrays in Angular

This section covers a comparison of const arrays and readonly arrays in TypeScript.

Let’s declare and initialize const arrays.

const constArray = [5, 1, 4];

While const variables cannot be reassigned, const arrays can have their elements modified/reassigned without any issues.

constArray[1] = 3; // works
constArray.push(11); // works
constArray.pop(); // works
constArray.push(14); // works
console.log(constArray); // [3, 1, 4, 14]

However, the original array cannot be reassigned.

For example, an array variable reassigns with new array values that give an error Cannot assign to ‘constArray’ because it is a constant.

constArray = [19, 6, 9];

Now, let’s look at a readonly array example:

In the following class:

in the below class

  • We declare the numbers property with a ReadonlyArray of number type and assign an array of values.
  • In the method, we try to modify the readonly array using pop/push and index.
class user {
  numbers: ReadonlyArray<number> = [10, 11, 12];

  public modifyArray(): void {
    this.numbers.pop(); // compiler error
    this.numbers.push(15); // compiler error
    this.numbers[0] = 1; // compiler error

The compiler gives the following error.

Property ‘pop’ does not exist on type ‘readonly number[]‘. Property ‘push’ does not exist on type ‘readonly number[]‘. Cannot find the name ‘numbers’. Did you mean the instance member ‘this? numbers’?

This indicates that readonly arrays cannot be reassigned with push/pop/index methods.

However, we can reassign the array with a new array of data.

this.numbers = [1, 2, 3];


In summary, const and readonly are used to enforce immutability in different ways:

  • const can be applied to variables only, while readonly is applied to properties.
  • A const value is initialized during declaration only, while readonly can be declared without assigned values.
  • A const value cannot be reassigned, while readonly can be reassigned. Since Angular uses the TypeScript language, these rules apply to Angular framework components as well.