如何在 TypeScript 中使用 readonly 关键字?
我们将学习在 TypeScript 中使用 readonly 关键字。readonly 关键字允许开发人员将类属性和成员设置为只读，并且我们无法编辑只读属性的值。
它的作用与 const 关键字相同，但 const 关键字用于变量，而 readonly 关键字用于类成员属性。此外，初始化 const 变量后，我们无法为其赋值。不过，我们可以在类构造函数中为只读属性赋值，并且赋值一次后就无法修改它们。
语法
用户可以按照以下语法使用 readonly 关键字将类属性设置为只读。
class demo {
readonly prop1: prop1_type;
}
我们已经使用上述语法声明了演示类并定义了 prop1 属性。此外，我们在 prop1 之前使用了 readonly 关键字。因此，任何人都无法在类外部修改它。
在其他编程语言中，我们使用 getter 方法获取私有类成员的值。但是，我们也可以在 TypeScript 中创建 getter 方法，这样我们就可以读取值，但不能写入值。
我们将通过以下各种示例学习如何使用单个关键字 readonly 替换 getter 方法的整个代码。
示例 1
在此示例中，我们创建了包含只读成员属性 property1 的类。用户可以看到我们如何在构造函数中初始化只读属性。
之后，我们创建了 class1 的对象，名为 object1。用户可以看到，通过引用 object1，我们可以获取 property1 的值，但无法为 property1 赋值。
class class1 {
// 创建只读属性
readonly property1: number;
property2: string;
constructor(value1: number, value2: string) {
this.property1 = value1;
this.property2 = value2;
}
}
let object1 = new class1(10, "TypeScript");
object1.property2 = "TutorialsPoint"; // 这样做没问题，因为 property2 不是只读的
// object1.property1 = 20; // 这会引发编译错误，因为 property1 使用了 readonly 关键字定义
console.log("The value of property1 is " + object1.property1);
console.log("The value of property2 is " + object1.property2);
编译后，它将生成以下 JavaScript 代码 -
var class1 = /** @class */ (function () {
function class1(value1, value2) {
this.property1 = value1;
this.property2 = value2;
}
return class1;
}());
var object1 = new class1(10, "TypeScript");
object1.property2 = "TutorialsPoint"; // 这样做没问题，因为 property2 不是只读的
// object1.property1 = 20; // 这会引发编译错误，因为 property1 使用了 readonly 关键字定义
console.log("The value of property1 is " + object1.property1);
console.log("The value of property2 is " + object1.property2);
输出
上述代码将产生以下输出 -
The value of property1 is 10 The value of property2 is TutorialsPoint
示例 2
在此示例中，我们创建了名为 color 的接口，其中包含只读的 colorName 属性。此外，它还包含一些其他属性，例如 hexcode 等。
接下来，我们创建了 color 类型的 colorObject。用户可以看到，我们可以访问 colorObject 的每个属性的值。此外，我们还可以更改 colorObject 中除 colorName 之外的所有属性的值，因为 colorName 在接口中是只读的。
interface color {
readonly colorName: string;
hexcode: string;
R: number;
G: number;
B: number;
}
let colorObject: color = {
colorName: "black",
hexcode: "#000000",
R: 0,
G: 0,
B: 0,
};
colorObject.R = 10;
colorObject.hexcode = "#000001";
// colorObject.colorName = "Blue"; // can't update read-only properties
console.log("The values of colorObject are " + colorObject.colorName);
console.log(colorObject.hexcode);
console.log(colorObject.R);
console.log(colorObject.G);
console.log(colorObject.B);
编译后，它将生成以下 JavaScript 代码 -
var colorObject = {
colorName: "black",
hexcode: "#000000",
R: 0,
G: 0,
B: 0
};
colorObject.R = 10;
colorObject.hexcode = "#000001";
// colorObject.colorName = "Blue"; // can't update read-only properties
console.log("The values of colorObject are " + colorObject.colorName);
console.log(colorObject.hexcode);
console.log(colorObject.R);
console.log(colorObject.G);
console.log(colorObject.B);
输出
上述代码将产生以下输出 -
The values of colorObject are black #000001 10 0 0
示例 3
以下示例演示了如何创建只读类型。我们像平常一样创建了接口，但在将其用作类型时，我们使用了"Readonly"关键字来使该类型变为只读类型。
用户可以观察到 wallObj 的类型是只读的，因此在对象本身中首次初始化其值后，我们无法编辑 wallObj 的任何单个属性。
interface wall {
wall_id: string;
color: string;
size: number;
tilesSize: number;
}
let wallObj: Readonly<wall> = {
wall_id: "1212132354656",
color: "white",
size: 30,
tilesSize: 2,
};
// 由于 wallObj 是只读的，因此无法进行以下更新
// wallObj.wall_id = "some value";
// wallObj.color = "some color";
// wallObj.size = "some number";
// wallObj.tilesSize = "some number";
// colorObject.colorName = "Blue"; // can't update read-only properties
console.log("The values of wallObjects are ");
console.log(wallObj.wall_id);
console.log(wallObj.color);
console.log(wallObj.size);
console.log(wallObj.tilesSize);
编译后，它将生成以下 JavaScript 代码 -
var wallObj = {
wall_id: "1212132354656",
color: "white",
size: 30,
tilesSize: 2
};
// 由于 wallObj 是只读的，因此无法进行以下更新
// wallObj.wall_id = "some value";
// wallObj.color = "some color";
// wallObj.size = "some number";
// wallObj.tilesSize = "some number";
// colorObject.colorName = "Blue"; // 无法更新只读属性
console.log("The values of wallObjects are ");
console.log(wallObj.wall_id);
console.log(wallObj.color);
console.log(wallObj.size);
console.log(wallObj.tilesSize);
输出
上述代码将产生以下输出 -
The values of wallObjects are 1212132354656 white 30 2
示例 4
在下面的示例中，我们在构造函数参数中使用了 readonly 关键字。我们创建了 student 类，它包含一些属性，包括只读属性。
我们使用构造函数初始化了所有类属性，但同样，我们在构造函数参数中使用了 readonly 关键字，使它们变为只读属性。
用户可以观察到他们无法在构造函数中编辑只读参数。
class student {
readonly student_id: number;
student_name: string;
std: number;
constructor(readonly id: number, name: string, std: number) {
// id = id + " "; // 因为 id 是只读属性，我们无法编辑它
this.student_id = id;
name = name + " ";
this.student_name = name;
this.std = std;
}
}
let student1 = new student(23232, "Shubham", 10);
console.log("The id of student is " + student1.student_id);
console.log("The name of the student is " + student1.student_name);
编译后，它将生成以下 JavaScript 代码 -
var student = /** @class */ (function () {
function student(id, name, std) {
this.id = id;
// id = id + " "; // 因为 id 是只读属性，我们无法编辑它
this.student_id = id;
name = name + " ";
this.student_name = name;
this.std = std;
}
return student;
}());
var student1 = new student(23232, "Shubham", 10);
console.log("The id of student is " + student1.student_id);
console.log("The name of the student is " + student1.student_name);
输出
上述代码将产生以下输出 -
The id of student is 23232 The name of the student is Shubham
我们学习了 readonly 关键字的使用及其不同的用例。在第一个示例中，我们学习了如何将 readonly 关键字与类属性结合使用。在第二个示例中，我们在接口中使用了 readonly 关键字。此外，我们在第三个示例中将 readonly 关键字与类型结合使用，并在最后一个示例中将其用作构造函数参数。
