如何在 TypeScript 中使对象属性不可变？

在本文中，我们将尝试了解如何在 TypeScript 中使对象属性不可变。 JavaScript 是一种高度动态和灵活的语言，因此使 JavaScript 中的对象属性不可变有点典型（尽管我们可能会以某种方式使用并不总是有效的 const 数据类型来实现它）。

因此，在TypeScript中，我们将尝试使用名为readonly 的关键字来实现属性的不变性。该关键字可以使对象属性不可更改，该属性不可更改，但只能访问而不能修改。

语法：以下是在 TypeScript 中使用readonly关键字的语法：

class class_name {
    readonly property_name : string
    ...
}

现在您已经对实现这个关键字有了一些基本的想法，让我们看一些可以使用这个readonly关键字的示例。

示例 1：在此示例中，我们将创建一个由多个属性组成的类，然后我们将尝试读取属性值并尝试更新这些值并将结果显示在控制台中。

Javascript

    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

输出：

XYZ
PQR
1234567890

示例 2：在此示例中，我们将创建一个接口，然后进一步使用该接口，我们将创建一个对象并为其分配一些值，其中一些值是只读的，然后将尝试更新一些值并在控制台中可视化结果。

Javascript

    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.

输出：

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

参考： https://www.typescriptlang.org/play#example/immutability