如何在 TypeScript 中使对象属性不可变?
不可变对象属性的简单定义是,一旦定义并初始化对象属性,就无法修改。
我们可以使用 const 关键字,但必须在创建属性时初始化属性。因此,我们必须使用 readonly 关键字使属性不可变,使其变为只读。这样,一旦初始化属性,就无法修改其值。
语法
用户可以按照以下语法使用 readonly 关键字使对象属性不可变。
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; // 不允许修改 key1,因为它是不可变的
编译后,它将生成以下 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; // 不允许修改 key1,因为它是不可变的
输出
上述代码将产生以下输出 -
The object properties are true hello 5450
示例
在此示例中,我们创建了一个数组。该数组的类型为 ReadonlyArray。用户可以尝试更改数组中任意索引处的值,但由于我们无法更改不可变属性的值,因此会引发编译错误。
此外,用户可以尝试使用数组的 push() 和 pop() 方法更新不可变数组,并在输出中观察编译错误。
let array: ReadonlyArray<number> = [10, 64, 43, 34]; console.log("第一个索引处的值为 " + array[1]); // 由于该数组是只读的,因此我们无法对其进行 push 和 pop() 操作 // array.push(30); // array.pop();
编译后,它将生成以下 JavaScript 代码 -
var array = [10, 64, 43, 34]; console.log("The value at 1st index is " + array[1]); // 由于数组是只读的,因此无法对其进行 push 和 pop() 操作。 // 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); }); // 不允许添加最新的,因为它是一个不可变的对象 // 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); }); // 不允许向最新对象添加元素,因为它是不可变对象 // newSet.add("string")
输出
上述代码将产生以下输出 -
The elements of set are Hi! Hello TypeScript JavaScript
在本教程中,用户学习了如何使用 readonly 关键字创建不可变对象。此外,他们还学习了如何创建不可变的集合和数组。
使用不可变对象的好处是它可以提高代码的安全性并提升代码的性能。