TypeScript 如何使用 readonly 关键字
我们将学习如何在TypeScript中使用readonly关键字。readonly关键字允许开发者将类的属性和成员变成只读,而且我们不能编辑只读属性的值。
它的作用与const关键字相同,但const关键字用于变量,而readonly关键字用于类成员属性。另外,我们不能在初始化const变量后给它们赋值。不过,我们还是可以在类的构造函数中为只读属性赋值,而且在赋值一次后不能修改。
语法
用户可以按照下面的语法来使用readonly关键字,使类的属性成为只读。
class demo {
readonly prop1: prop1_type;
}
我们在上面的语法中声明了demo类并定义了prop1
属性。同时,我们在prop1
前使用了readonly关键字。所以,任何人都不能在类外修改它。
在其他编程语言中,我们使用 “getters “来获取私有类成员的值。然而,我们也可以在TypeScript中创建getters,它允许我们读取值,但不允许写入。
我们将通过下面的各种例子,学习如何通过单一的关键字readonly来替换整个 “getters “的代码。
示例 1
在这个例子中,我们创建了包含只读的property1
成员属性的类。用户可以看到我们是如何在构造函数中初始化只读属性的。
之后,我们创建了名为object1
的class1对象。用户可以看到,通过将object1
作为一个引用,我们可以得到property1的值,但是我们不能给property1分配一个新的值。
class class1 {
// creating the read-only property
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"; // this is fine as property2 is not read-only
// object1.property1 = 20; // this will generate compilation error as property1 is defined with readonly keyword
console.log("The value of property1 is " + object1.property1);
console.log("The value of property2 is " + object1.property2);
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"; // this is fine as property2 is not read-only
// object1.property1 = 20; // this will generate compilation error as property1 is defined with readonly keyword
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
,等等。
接下来,我们创建了颜色类型的 “colorObject”。用户可以看到,我们可以访问 “colorObject “的每个属性的值。同时,我们可以改变colorObject
的每个属性的值,除了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);
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,
};
// The below updation are not possible as wallObj is read-only
// 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);
var wallObj = {
wall_id: "1212132354656",
color: "white",
size: 30,
tilesSize: 2
};
// The below updation are not possible as wallObj is read-only
// 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);
输出
上述代码将产生以下输出 —
The values of wallObjects are
1212132354656
white
30
2
示例 4
在下面的例子中,我们在构造函数参数中使用了readonly关键字。我们创建了学生类,它包含一些属性,包括只读。
我们使用构造函数来初始化所有的类属性,但同样,我们在构造函数参数中使用了readonly关键字来使它们成为只读。
用户可以观察到他们不能编辑构造函数内的只读参数。
class student {
readonly student_id: number;
student_name: string;
std: number;
constructor(readonly id: number, name: string, std: number) {
// id = id + " "; // as id is a read-only property, and we can't edit it
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);
var student = /** @class */ (function () {
function student(id, name, std) {
this.id = id;
// id = id + " "; // as id is a read-only property, and we can't edit it
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
关键字,在最后一个例子中作为构造函数的参数。