The const and readonly both are used to create the variables and properties that can not be re-assigned once they get initialized by some value. But they are different from each other. Let us discuss the differences between them.

Const

The const keyword is used to declare a constant variable that cannot be re-assigned to a different value later.

Syntax:

const variableName: variableType = value;

Features:

• The const keyword will not allow reassigning the value of the variable.
• A constant variable must be initialized at the time of the declaration.
• The variables defined using the const keyword have the block scope.
• The arrays defined using the const keyword can also not be re-assigned with a new array. While the array values can be updated using the index.

Example: The below code example implements the const keyword to declare a variable in TypeScript.

const cmpny_name: string = "GeeksforGeeks";
const employees: number = 300;
const arr: (string | number)[] =
    [1, 2, "four", "four"];
console.log
    ("Before modifying array elements: ", arr);
arr[2] = "three";
console.log
    ("After modifying array elements: ", arr);
console.log
    (`Company Name: ${cmpny_name}, Workforce: ${employees}+`);
cmpny_name = "New Company";
employees = 200;
console.log
    (`Company Name: ${cmpny_name}, Workforce: ${employees}+`);

Output:

Before modifying array elements:  [1, 2, "four", "four"]
After modifying array elements:  [1, 2, "three", "four"]
Company Name: GeeksforGeeks, Workforce: 300+
Cannot assign to 'cmpny_name' because it is a constant.
Cannot assign to 'employees' because it is a constant.

Readonly

The readonly keyword is used to define properties whose values can not be changed once they are initialized with a value. The readonly is mostly used with the properties of objects, classes and interfaces.

Syntax:

class className {
    public readonly propertyName = value;
}

Features:

• A property defined using readonly must be assigned at the time of declaration or using the constructor function of the class (if it's a class property).
• The value of readonly property can not be re-assigned with a new value.
• The readonly can be used to create a entire object or specific properties as readonly.

Example: The below code example illustrates the practical implementation of readonly to define properties.

// Implementation with classes
class cmpny {
    public readonly name: string =
        "GeeksforGeeks";
    public readonly desc: string =
        "A Computer Science Portal.";
}
const myCmpny = new cmpny();
console.log
    (`Company: ${myCmpny.name}, 
    Description: ${myCmpny.desc}`);
myCmpny.name = "New Company";
myCmpny.desc = "New Description";
console.log
    (`Company: ${myCmpny.name}, 
    Description: ${myCmpny.desc}`);


// Implementation with interface and object
interface readonlyInterface {
    readonly crktr_name: string,
    readonly runs: number
}
const obj: readonlyInterface = {
    crktr_name: "Virat Kohli",
    runs: 26000
}
console.log
    (`Cricketer Name: ${obj.crktr_name},
     Runs: ${obj.runs}`);
obj.crktr_name = "Sachin Tendulkar";
obj.runs = 30000;
console.log
    (`Cricketer Name: ${obj.crktr_name}, 
    Runs: ${obj.runs}`);

Output:

Company: GeeksforGeeks, Description: A Computer Science Portal.
Cannot assign to 'name' because it is a read-only property.
Cannot assign to 'desc' because it is a read-only property.
Cricketer Name: Virat Kohli, Runs: 26000
Cannot assign to 'crktr_name' because it is a read-only property.
Cannot assign to 'runs' because it is a read-only property.

Differences between const and readonly in TypeScript