TypeScript has a number of utility types, which are types specifically created by TypeScript to solve a problem. In this article, let's look at the Readonly type.
TypeScript Readonly Type
As the name suggests, the Readonly
type in TypeScript suggests that a particular type is read-only.
Let's look at an example. Below, we don't want anyone to update any part of myObject. We can make it a read-only object like so:
type User = {
firstName: string,
lastName: string
}
let firstUser:Readonly<User> = {
firstName: "John",
lastName: "Doe"
}
If you try to change a property of firstUser, you'll get the following error:
Cannot assign to 'firstName' because it is a read-only property.
Readonly variables don't work in TypeScript
When we define the type User above, we are creating a custom interface - i.e. something which objects have to conform to. Readonly only works with interfaces or custom types like the one we've used. As such, we can still edit Readonly variables:
let myVariable:Readonly<string> = "Hello World";
myVariable = "Goodbye World";
console.log(myVariable); // console logs "Goodbye World"
The above code is valid and will work in TypeScript. If you need read only variables, you can simply use const instead, i.e:
const myVariable:string = "Hello World";
// Throws error: Cannot assign to 'myVariable' because it is a constant.
myVariable = "Goodbye World";
Top comments (0)