TypeScript 如何使对象属性不可变

在这篇文章中，我们将尝试理解如何在TypeScript中使对象属性不可变。JavaScript是一种高度动态和灵活的语言，因此在JavaScript中使对象属性不可变有点典型（虽然我们可以使用const数据类型来实现，但并不总是有效）。

所以在 TypeScript 中，我们将尝试使用一个叫做 readonly 的关键字来实现属性的不可变性。这个关键字可以使对象属性不可更改，即不可改变，只能访问而不能修改。

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

class class_name {
    readonly property_name : string
    ...
}

现在您已经有了一些关于实现此关键字的基本概念，让我们来看一些可以使用此 readonly 关键字的示例。

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

Javascript

<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>

输出：

XYZ
PQR
1234567890

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

JavaScript

<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>

输出：

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

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