Create Immutable Types in TypeScript
Unlike JavaScript's const variable declarations, TypeScript allows you to create fully immutable types. In this lesson, we learn how to create immutable types in TypeScript with the help of as const, readonly and Readonly<T>.
Instructor: [00:00] Here we are declaring an object with the help of const. Then, we're printing the values here, and then you can see the output in the console. If we try to update the value of our object, let's say we make it an empty object or something else, it will not allow us to do that, because user is declared as a constant.
[00:14] If we try to update one of the fields inside of our object, like name to be, let's say, Jane Doe, JavaScript will not complain and simply update the value, because this is how just the constants work in JavaScript. They stop you from updating the value of the variable, but they can't stop you from updating the nested fields. Same goes for the arrays.
[00:32] With the help of TypeScript's as const, we can make our variables to be fully immutable. Now both of our fields have been made read-only. If you try to assign the name a new value, it will throw the error that name cannot be updated.
[00:43] It works on the nested objects also, so if I put here education degree is SE, and if I try to update that here, it will not allow us to do that because degree is also immutable. It works on all the nesting levels, so even if I have a variable at fifth level in this object, it would still be made immutable.
[01:01] The same applies to arrays and other types also. Here we have an array of skills, and we're pushing a new skill to it. Everything seems to be working fine. To make it immutable, we will simply put as const here. Now TypeScript will complain, because we are trying to push to a read-only array. If we remove this mutation from here, the error goes away, and everything goes back to normal.
[01:20] As you may have seen in the last example and this example, we are using as const on the values. For the types, we have a different way of specifying the immutability. Going back to our last example, now we have a type user. Our user object is now using this type. Then we are updating some of the values here and then just logging the user here.
[01:37] Let's say that we want to make the name to be immutable. To do that, we will just put readonly here. Then, now it will start throwing error that the name cannot be changed because it is read only, but the age is still working fine. If I put readonly in front of the age also, and now the age is also throwing the error.
[01:53] What about object? If I put readonly in front of the education and I try to update the education, it is throwing the error as expected, that the education cannot be changed.
[02:01] If I try to update it with user.education.degree is IT, it is not throwing any errors, because readonly updates only the first level. For any nested fields, you still need to put readonly in front of them. Now it is throwing the error here also.
[02:15] Let's see how we can make our arrays to be immutable. I've added skills as an array of strings in my user type, then I have assigned some default values to the skills. Here, I'm trying to reassign value and then trying to push to the same skills array.
[02:26] If you put readonly in front of the skills array, you will see here that the reassignment is throwing the error but the push is still working fine, because just like objects, we cannot reassign a new value with this readonly, but the string array can still be pushed to.
[02:39] To make this also read only, we'll have to put readonly here. Now the push is also throwing the error. There's a different syntax for this also. I'll copy it and I'll paste it, and then I'll make it read-only array. Then, I'll remove this. Now it is giving the same exact output.