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

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

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

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

class class_name {
    readonly property_name : string
    ...
}

现在你对实现该关键字有一些基本的了解了，让我们来看一些可以使用readonly关键字的示例。

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

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

    // 打印值
    console.log(user1.city);
    console.log(user2.city);
    console.log(user1.phoneNo);

    // user1.city = "ABCDEF"; 不可能，会导致错误

</script>

输出：

XYZ
PQR
1234567890

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

<script>
    interface UserDetails {
        readonly firstName: string;
        lastName: string;
    }

    let user: UserDetails = {
        firstName: "Aman",
        lastName: "XYZ",
    };

    // 在更改之前打印用户对象的值
    console.log(user);

    user.lastName = "Singla";

    // 在更改之后打印用户对象的值
    console.log(user);

    // user.firstName = "APPLE"; 不可以给firstName赋值，因为它是一个只读属性。
</script>

输出：

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

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

阅读更多：JavaScript 教程