当前位置：极客教程 > TypeScript > TypeScript 教程 > TypeScript 如何使用 readonly 关键字

TypeScript 如何使用 readonly 关键字

TypeScript 如何使用 readonly 关键字

我们将学习如何在TypeScript中使用readonly关键字。readonly关键字允许开发者将类的属性和成员变成只读，而且我们不能编辑只读属性的值。

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

语法

用户可以按照下面的语法来使用readonly关键字，使类的属性成为只读。

class demo {
   readonly prop1: prop1_type;
}
TypeScript

我们在上面的语法中声明了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);
TypeScript
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);
TypeScript

输出

上述代码将产生以下输出 —

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

示例 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);
TypeScript
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);
TypeScript

输出

上述代码将产生以下输出 —

The values of colorObject are black
#000001
10
0
0
TypeScript

示例 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);
TypeScript
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);
TypeScript

输出

上述代码将产生以下输出 —

The values of wallObjects are 
1212132354656
white
30
2
TypeScript

示例 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);
TypeScript
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);
TypeScript

输出

上述代码将产生以下输出 —

The id of student is 23232
The name of the student is Shubham
TypeScript

我们学习了使用readonly关键字和它的不同使用情况。在第一个例子中，我们学习了在类属性中使用readonly关键字。在第二个例子中，我们在接口中使用了readonly关键字。此外，在第三个例子中，我们在类型中使用了readonly关键字，在最后一个例子中作为构造函数的参数。

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程

TypeScript 教程

登录

找回密码？

注册