Typescript provides a way to indicate props in an object / type, or an entire type, as read only.
Props in an object
Consider this example -
1
2
3
4
|
class Fruit {
readonly name = "apple";
color = "red";
}
|
In the code block we have specified the prop name as read-only.
We can very much change the color of an object derived from Fruit.
1
2
3
4
5
6
7
|
const apple = new Fruit();
console.log(apple);
// Fruit { name: 'apple', color: 'red' }
apple.color = "blue";
console.log(apple);
// Fruit { name: 'apple', color: 'blue' }
|
But, we cannot change the name -
1
2
|
apple.name = "orange";
// error TS2540: Cannot assign to 'name' because it is a read-only property
|
In normal Javascript, you would have defined the property as non-writable using property descriptors to achieve the same effect.
Props in a type
We create types similar to an object, and we can make one or more of the props read-only.
1
2
3
4
5
6
7
8
9
10
11
12
|
type Fruit = {
readonly name: string;
color: string;
};
const newFruit: Fruit = { name: "apple", color: "red" };
console.log(newFruit);
// { name: 'apple', color: 'red' }
newFruit.color = "blue";
console.log(newFruit);
// { name: 'apple', color: 'blue' }
|
Note that setting name during initialization is allowed, but the prop cannot be changed later.
All props in a type
We can make entire types as read-only by processing it through a Readonly type.
1
2
3
4
5
6
7
8
9
10
|
type Fruit = {
name: string,
color: string
};
type ReadFruit = Readonly<Fruit>;
let apple: ReadFruit = { name: "apple", color: "red" };
console.log("apple: ", apple);
// apple: { name: 'apple', color: 'red' }
|
We get an error if we try to change any prop -
1
2
|
apple.name = "orange";
// error TS2540: Cannot assign to 'name' because it is a read-only property.
|
In normal Javascript, you can achieve the same effect using Object.freeze().
