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

---

不可变对象属性的简单定义是我们一旦定义并初始化对象属性后无法修改的属性。

我们可以使用 const 关键字，但必须在创建属性时初始化该属性。因此，我们必须使用 readonly 关键字来使属性不可变，允许它只读。因此，一旦我们初始化了属性，我们就无法修改属性的值。

语法

用户可以按照以下语法使用 readonly 关键字使对象属性不可变。

interface test {
   readonly property1: boolean;
}
var object: test = {
   property1: false,
};

在以上语法中，‘test’ 接口的 property1 是不可变的，因为它只是只读的，我们无法在对象块外部更改其状态。

示例

在下面的示例中，immutableObject 包含 key1、key2 和 key3。我们已将 readonly 关键字与 key1 和 key2 一起使用以使这些属性不可变。

我们已在类构造函数中初始化了不可变属性。如果我们不在类构造函数中初始化不可变对象属性，则会生成编译错误。

此外，我们无法在类外部更改不可变对象属性的值。

class immutableObject {
   readonly key1: boolean;
   readonly key2: string;
   key3: number;

   constructor(value1: boolean, value2: string, value3: number) {
      this.key1 = value1;
      this.key2 = value2;
      this.key3 = value3;
   }
}

let obj = new immutableObject(true, "hello",5450);
console.log("The object properties are ");
console.log(obj.key1)
console.log(obj.key2)
console.log(obj.key3)

// obj.key1 = false; // modifying the key1 is not allowed as it is immutable

编译后，它将生成以下 JavaScript 代码：

var immutableObject = /** @class */ (function () {
   function immutableObject(value1, value2, value3){
      this.key1 = value1;
      this.key2 = value2;
      this.key3 = value3;
   }
   return immutableObject;
}());
var obj = new immutableObject(true, "hello", 5450);
console.log("The object properties are ");
console.log(obj.key1);
console.log(obj.key2);
console.log(obj.key3);
// obj.key1 = false; // modifying the key1 is not allowed as it is immutable

输出

以上代码将产生以下输出：

The object properties are 
true
hello
5450

示例

在此示例中，我们创建了数组。数组的类型为ReadonlyArray。用户可以尝试更改数组中任何索引处的值，并且他们会收到编译错误，因为我们无法更改不可变属性的值。

此外，用户可以尝试使用数组的push() 和pop() 方法更新不可变数组，并在输出中观察编译错误。

let array: ReadonlyArray<number> = [10, 64, 43, 34];
console.log("The value at 1st index is " + array[1]);

// We can't perform push, and pop() operation on the array as it is readonly

// array.push(30);
// array.pop();

编译后，它将生成以下 JavaScript 代码：

var array = [10, 64, 43, 34];
console.log("The value at 1st index is " + array[1]);

// We can't perform push, and pop() operation on the array as it is readonly

// array.push(30);

// array.pop();

输出

以上代码将产生以下输出：

The value at 1st index is 64

示例

在 TypeScript 中，集合是对象。在此示例中，我们创建了集合对象，其类型为 ReadonlySet，这使得集合不可变。用户可以看到，我们可以通过迭代集合来访问集合的每个元素，但我们无法向集合中添加或从中删除元素。

let newSet: ReadonlySet<string> = new Set([
   "Hi!",
   "Hi!",
   "Hello",
   "TypeScript",
   "JavaScript",
]);

console.log("The elements of set are ");
newSet.forEach((ele) => {
   console.log(ele);
});

// adding to the newest is not allowed as it is an immutable object

// newSet.add("string")

编译后，它将生成以下 JavaScript 代码：

var newSet = new Set([
   "Hi!",
   "Hi!",
   "Hello",
   "TypeScript",
   "JavaScript",
]);
console.log("The elements of set are ");
newSet.forEach(function (ele) {
   console.log(ele);
});
// adding to the newest is not allowed as it is an immutable object

// newSet.add("string")

输出

以上代码将产生以下输出：

The elements of set are 
Hi!
Hello
TypeScript
JavaScript

在本教程中，用户学习了如何使用 readonly 关键字创建不可变对象。此外，他们还学习了如何创建不可变的集合和数组。

使用不可变对象的好处在于它提供了代码的安全性和提高了代码的性能。