TypeScript 如何使对象属性变得不可改变

不可变的对象属性的简单定义是，一旦我们定义并初始化了对象属性，我们就不能修改这些属性。

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

语法

用户可以按照下面的语法来使用readonly关键字，使对象属性immutable。

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

在上面的语法中，’test’接口的property1是不可变的，因为它只是只读的，我们不能在对象块之外改变它的状态。

示例

在下面的例子中，immutableObject包含key1、key2和key3。我们在key1和key2中使用了readonly关键字，使这些属性成为不可变的。

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

另外，我们不能在类之外改变不可变的对象属性的值。

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

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

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

示例

在 TypeScripts 中，set 是对象。在这个例子中，我们已经创建了set对象，它的类型是ReadonlySet，这使得这个set是不可改变的。用户可以看到，我们可以通过遍历这个集合来访问其中的每一个元素，但我们不能从这个集合中添加或删除元素。

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

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关键字创建不可变的对象。此外，他们还学会了如何创建不可变的集合和数组。

使用不可变对象的好处是，它提供了代码的安全性并提高了代码的性能。