¿Cómo hacer que las propiedades de los objetos sean inmutables en TypeScript?

En este artículo, intentaremos comprender cómo podemos hacer que las propiedades de los objetos sean inmutables en TypeScript. JavaScript es un lenguaje altamente dinámico y flexible, por lo tanto, hacer que las propiedades de los objetos en JavaScript sean inmutables es un poco típico (aunque podemos implementarlo de alguna manera usando un tipo de datos const que no siempre funciona).

Así que aquí en TypeScript intentaremos implementar la inmutabilidad de los atributos usando una palabra clave llamada solo lectura. Esta palabra clave podría hacer que la propiedad del objeto no se pueda cambiar, lo que no se puede modificar, pero solo se puede acceder a él en lugar de modificarlo.

Sintaxis: La siguiente es la sintaxis del uso de la palabra clave de solo lectura en TypeScript:

class class_name {
    readonly property_name : string
    ...
}

Ahora que tiene una idea básica de cómo implementar esta palabra clave, veamos algunos de los ejemplos en los que podríamos usar esta palabra clave de solo lectura .

Ejemplo 1: en este ejemplo, crearemos una clase que consta de varias propiedades y luego intentaremos leer los valores de propiedad y también intentaremos actualizar esos valores y el resultado será en la consola.

<script>
    class UserDetails {
        readonly name: string
        readonly city: string
        readonly phoneNo: number
        constructor(name: string, city: string, phoneNo: number){
            this.name = name
            this.city = city
            this.phoneNo = phoneNo
        }  
    }
      
    let user1 = new UserDetails("ABCD", "XYZ", 1234567890);
    let user2 = new UserDetails("APPLE", "PQR", 1269785100);
      
    // Printing values
    console.log(user1.city);
    console.log(user2.city);
    console.log(user1.phoneNo);
      
    // user1.city = "ABCDEF"; Not possible will result in error
</script>

Producción:

XYZ
PQR
1234567890

Ejemplo 2: en este ejemplo, crearemos una interfaz y luego usaremos esa interfaz, crearemos un objeto y le asignaremos algunos valores, algunos de solo lectura y luego intentaremos actualizar algunos valores y visualizar el resultado en la consola.

<script>
    interface UserDetails {
        readonly firstName: string;
        lastName: string;
    }
      
    let user: UserDetails = {
        firstName: "Aman",
        lastName: "XYZ",
    };
      
    // Printing user object values before it is changed
    console.log(user);
      
    user.lastName = "Singla";
      
    // Printing user object values after it is changed
    console.log(user);
      
    // user.firstName = "APPLE"; Cannot assign 
    // value to firstName because it is a
    // read-only property.
</script>

Producción:

{ firstName: 'Aman', lastName: 'XYZ' }
{ firstName: 'Aman', lastName: 'Singla' }

Referencia: https://www.typescriptlang.org/play#example/immutability