如何在TypeScript中使用readonly关键字？

我们将学习如何在TypeScript中使用readonly关键字。readonly关键字允许开发者将类属性和成员设为只读，我们无法编辑只读属性的值。

它的作用与const关键字相同，但const关键字用于变量，而readonly关键字用于类成员属性。此外，我们不能在初始化后为const变量赋值。但是，我们可以在类构造函数内为只读属性赋值，并且在赋值一次后不能修改它们。

语法

用户可以按照以下语法使用readonly关键字将类属性设为只读。

class demo {
   readonly prop1: prop1_type;
}

我们在上面的语法中声明了demo类并定义了prop1属性。我们还在prop1之前使用了readonly关键字。因此，任何人都无法在类外部修改它。

在其他编程语言中，我们使用“getter”来获取私有类成员的值。但是，我们也可以在TypeScript中创建getter，它允许我们读取值但不能写入值。

我们将学习如何使用单个关键字readonly替换“getter”的整个代码，以下是一些示例。

示例1

在这个例子中，我们创建了一个包含只读property1成员属性的类。用户可以看到我们如何在构造函数中初始化只读属性。

之后，我们创建了名为object1的class1对象。用户可以看到，通过引用object1，我们可以获取property1的值，但我们不能为property1赋值。

Open Compiler
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);

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

Open Compiler
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);

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

输出

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

The value of property1 is 10
The value of property2 is TutorialsPoint

示例2

在这个例子中，我们创建了一个名为color的接口，其中包含只读colorName属性。它还包含其他一些属性，例如hexcode等。

接下来，我们创建了color类型的colorObject。用户可以看到我们可以访问colorObject的每个属性的值。此外，我们可以更改colorObject的每个属性的值，除了colorName，因为它在接口中是只读的。

Open Compiler
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代码：

Open Compiler
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的任何单个属性。

Open Compiler
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);

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

Open Compiler
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关键字。我们创建了student类，它包含一些属性，包括只读属性。

我们使用构造函数初始化所有类属性，但是，我们再次结合构造函数参数使用了readonly关键字来使它们成为只读的。

用户可以观察到，他们无法在构造函数内编辑只读参数。

Open Compiler
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);

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

Open Compiler
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关键字与类型一起使用，在最后一个例子中将其作为构造函数参数使用。

更新于：2023年1月20日

浏览量：308

启动你的职业生涯

通过完成课程获得认证

开始学习
广告