如何在TypeScript中使用getter和setter?


在TypeScript中,gettersetter是用於分別獲取和設定類成員值的兩個術語。但是,使用者可以透過點運算子直接訪問類的公共成員,方法是將特定類的物件作為引用。要訪問類的私有成員,只需要使用getter方法。

使用getter訪問類的私有成員

就像我們在C++和Java等其他程式語言中建立方法來訪問類的私有成員一樣,getter在TypeScript中也用於相同目的。我們可以透過在訪問器方法的定義前編寫get關鍵字來建立getter,該方法返回某個值。

語法

使用者可以按照以下語法定義getter,並使用它來獲取私有成員的值。

class employee {
   private emp_Name: string = "Shubham Vora";
   public get name() {
      return this.emp_Name;
   }
}

let man = new employee();
let name_Value = man.name;

在上面的語法中,我們使用get關鍵字定義了name()方法,並使用name方法訪問類的私有成員emp_Name。

在TypeScript中使用'getter'的步驟

步驟1 - 建立employee類。

步驟2 - 將emp_Name、age_of_emp和role作為employee類的私有成員。不要忘記定義每個變數的型別並用一些值初始化它。

步驟3 - 接下來,使用get關鍵字定義getter來訪問員工的姓名和年齡。

步驟4 - 現在,建立employee類的物件。

步驟5 - 使用employee類的物件作為引用和點運算子來呼叫getter。

開發人員可以觀察到,我們沒有像普通方法那樣呼叫getter,而是在最後沒有編寫括號就呼叫了它。

示例

我們在下面的示例中使用了getter來訪問employee類的私有成員。在輸出中,使用者可以看到我們正在使用getter訪問姓名和年齡並顯示它們。

class employee {
   // creating private class members
   private emp_Name: string = "Shubham Vora";
   private age_of_emp: number = 22;
   private role: string = "Content Writer";
   // getters to get the name of the employee
   public get name() {
      return this.emp_Name;
   }
   //  getter to get the age
   public get age() {
      return this.age_of_emp;
   }
}

// Creating the object of the Student class
let man = new employee();

// Call the getter without paranthesis
let name_Value = man.name;
// Print the name
console.log("The name of the employee is " + name_Value);
console.log("The age of the employee is " + man.age);

編譯後,它將生成以下JavaScript程式碼:

var employee = /** @class */ (function () {
   function employee() {
      // creating private class members
      this.emp_Name = "Shubham Vora";
      this.age_of_emp = 22;
      this.role = "Content Writer";
   }
   Object.defineProperty(employee.prototype, "name", {
      // getters to get the name of the employee
      get: function () {
         return this.emp_Name;
      },
      enumerable: true,
      configurable: true
   });
   Object.defineProperty(employee.prototype, "age",{
      //  getter to get the age
      get: function () {
         return this.age_of_emp;
      },
      enumerable: true,
      configurable: true
   });
   return employee;
}());
// Creating the object of the Student class
var man = new employee();
// Call the getter without paranthesis
var name_Value = man.name;
// Print the name
console.log("The name of the employee is " + name_Value);
console.log("The age of the employee is " + man.age);

輸出

以上程式碼將產生以下輸出:

The name of the employee is Shubham Vora
The age of the employee is 22

使用setter設定TypeScript中類成員的值

通常,我們不能透過將物件作為引用來更改TypeScript中類私有成員的值。因此,我們需要使用setter。setter的工作方式與普通方法相同,但是我們需要在方法定義之前新增'set'關鍵字才能將其設為setter。

語法

使用者可以按照以下語法使用setter來更改類私有成員的值。

class employee {
   private emp_Name: string = "Shubham Vora";
   public set name(new_value) {
      this.emp_Name = new_value;
   }
}

let man = new employee();
let man.name = "Shubham";

在上面的語法中,我們使用了set關鍵字來建立setter方法。透過使用setter,我們更改了emp_name變數的值。

引數

setter方法正好接受一個引數,如下所述。

  • new_Value - 這是我們需要為私有成員設定的值。

在TypeScript中使用'setter'的步驟

步驟1 - 使用set關鍵字建立setter來更改emp_Name變數的值。

步驟2 - 將new_Value作為setter方法的引數傳遞。

步驟3 - 建立employee類的物件。我們將透過呼叫setter來更改emp_Name的值。

步驟4 - 列印emp_Name變數的更新值。

示例

在下面的示例中,我們使用了employee類的物件作為引用和setter方法的名稱來訪問該方法。我們為setter分配新值,就像為類變數分配值一樣。呼叫setter時,它表示使用者不需要將新值作為引數傳遞,而是可以使用賦值運算子和新值作為右運算元。

class employee {
   // creating private class members
   private emp_Name: string = "Shubham Vora";
   private age_of_emp: number = 22;
   private role: string = "Content Writer";
   // getters to get the name of the employee
   public get name() {
      return this.emp_Name;
   }
   public set name(new_value: string) {
      this.emp_Name = new_value;
   }
}

// creating the object of the Student class
let man = new employee();

// Call the getter without paranthesis
let name_Value = man.name;
// Print the name
console.log("The name of the employee is " + name_Value);
//   update the employee name using the setters
man.name = "Jems Bond";
console.log(
   "The name of the employee after updating it using the setters is " + man.name
);

編譯後,它將生成以下JavaScript程式碼:

var employee = /** @class */ (function () {
   function employee() {
      // creating private class members
      this.emp_Name = "Shubham Vora";
      this.age_of_emp = 22;
      this.role = "Content Writer";
   }
   Object.defineProperty(employee.prototype, "name", {
      // getters to get the name of the employee
      get: function () {
         return this.emp_Name;
      },
      set: function (new_value) {
         this.emp_Name = new_value;
      },
      enumerable: true,
      configurable: true
   });
   return employee;
}());
// creating the object of the Student class
var man = new employee();
// Call the getter without paranthesis
var name_Value = man.name;
// Print the name
console.log("The name of the employee is " + name_Value);
//   update the employee name using the setters
man.name = "Jems Bond";
console.log("The name of the employee after updating it using the setters is " + man.name);

輸出

以上程式碼將產生以下輸出:

The name of the employee is Shubham Vora
The name of the employee after updating it using the setters is Jems Bond

在本教程中,我們學習瞭如何在TypeScript中使用getter和setter。

更新於:2022年12月19日

8K+瀏覽量

啟動你的職業生涯

透過完成課程獲得認證

開始學習
廣告
© . All rights reserved.