資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究如何在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賦值。
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程式碼：
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等。
接下來，我們建立了color型別的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);
編譯後，它將生成以下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,
};
// 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程式碼：
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關鍵字來使它們成為只讀的。
使用者可以觀察到，他們無法在建構函式內編輯只讀引數。
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程式碼：
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關鍵字與型別一起使用，在最後一個例子中將其作為建構函式引數使用。
瀏覽量：308
