How to use getters and setters in TypeScript?


In TypeScript, the getters and setters are two terms that can be used to get and set the value of the class members, respectively. However, users can access the public members of the class directly via the dot operator by taking the object of the particular class as a reference. To access the class's private members, we just need to use the getter method. In this tutorial, we will learn to use the getters and setters in TypeScript.

Using the getters to access the private members of the class

As we create a method to access the class's private members in other programming languages like C++ and Java, getters are used for the same in TypeScript. We can create the getters by writing the get keyword before the definition of the accessor method, which returns some value.

Syntax

Users can follow the syntax below to define the getters and get the value of private members using that.

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

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

In the above syntax, we have defined the name() method with the get keyword and we are accessing the emp_Name, the class’s private member using the name method.

Steps for using the 'getters' in TypeScript

Step 1 − Create the employee class.

Step 2 − Also, add the emp_Name, age_of_emp, and role as a private member of the employee class. Don’t forget to define the type of every variable and initialize it with some value.

Step 3 − Next, use the get keyword and define the getters to access the name and age of the employee.

Step 4 − Now, create the object of the employee class.

Step 5 − Call the getters by using the employee class’s object as a reference and the dot operator. 

Developers can observe that we haven’t called the getters like the normal method and have called it without writing the parentheses at last.

Example

We have used the getters to access the private members of the employee class in the below example. In the output, users can observe that we are accessing the name and age using the getters and displaying them.

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

On compiling, it will generate the following JavaScript code −

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

Output

The above code will produce the following output −

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

Using the setters to set the value of class members in TypeScript

Generally, we can’t change the value of the class's private members by taking the object as a reference in TypeScript. So, we need to use setters. The setter works as a normal method, but we need to add the ‘set’ keyword before the method definition to make it a setter.

Syntax

Users can follow the syntax below to use setters to change the value of the private member of the class.

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";

In the above syntax, we have used the set keyword to create the setters method. By using the setters, we change the value of the emp_name variable.

Parameters

The setters method takes exactly one parameter which is explained below.

  • new_Value − It is a value, which we need to set for the private member.

Steps for using the 'setters' in TypeScript

Step 1 − Create the setters using the set keyword to change the value of the emp_Name variable.

Step 2 − Pass the new_Value as a parameter of the setters method.

Step 3 − Create the object of the employee class. We will change the value of emp_Name, by invoking the setters.

Step 4 − Print the updated value of the emp_Name variable.

Example

In the below example, We have used the object of the employee class as a reference and the name of the setters method to access the method. We assign the new value to setters as we assign the value to the class variable. While invoking the setters, it says that users don’t need to pass a new value as a parameter but can use the assignment operator and new value as a right operand.

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

On compiling, it will generate the following JavaScript code −

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

Output

The above code will produce the following output −

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

In this tutorial, we learned how to use getters and setters in TypeScript.

Updated on: 19-Dec-2022

7K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements