Readonly properties in TypeScript
LuisPa
Posted on March 24, 2020
TypeScript introduced the keyword readonly
, which makes a property as read-only in the class, type or interface.
Prefix readonly
is used to make a property as read-only. Read-only members can be accessed outside the class, but their value cannot be changed. Since read-only members cannot be changed outside the class, they either need to be initialized at the declaration or initialized inside the class constructor.
class Employee {
readonly empCode: number;
empName: string;
constructor(code: number, name: string) {
this.empCode = code;
this.empName = name;
}
}
let emp = new Employee(10, "John");
emp.empCode = 20; //Compiler Error
emp.empName = 'Bill'; //Compiler Error
In the above example, we have the Employee
class with two properties- empName
and empCode
. Since empCode
is read only, it can be initialized at the time of declaration or in the constructor.
If we try to change the value of empCode
after the object has been initialized, the compiler shows the following compilation error:
error TS2540: Cannot assign to empCode' because it is a constant or a read-only property.
An interface can also have readonly
member properties.
interface IEmployee {
readonly empCode: number;
empName: string;
}
let empObj:IEmployee = {
empCode:1,
empName:"Steve"
}
empObj.empCode = 100; // Compiler Error: Cannot change readonly 'empCode'
As you can see above, empCode
is readonly
, so we can assign a value at the time of creating an object but not afterward.
In the same way, you can use Readonly<T>
to create a readonly
type, as shown below.
interface IEmployee {
empCode: number;
empName: string;
}
let emp1: Readonly<IEmployee> = {
empCode:1,
empName:"Steve"
}
emp1.empCode = 100; // Compiler Error: Cannot change readonly 'empCode'
emp1.empName = 'Bill'; // Compiler Error: Cannot change readonly 'empName'
let emp2: IEmployee = {
empCode:1,
empName:"Steve"
}
emp2.empCode = 100; // OK
emp2.empName = 'Bill'; // OK
In the above example, emp1
is declared as Readonly<IEmployee>
and so values cannot be changed once initialized.
Posted on March 24, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.