TypeScript Getter and Setter

Note: If you're new to TypeScript, check our Getting Started with TypeScript tutorial first.

TypeScript getters and setters are special methods that provide controlled access to object properties:

• Getters allow us to read private properties like regular fields.
• Setters let us add custom logic when assigning values to fields.

Types of Object Properties

In TypeScript, object properties can be accessed in two ways:

• Data Properties: They hold values directly.
• Accessor Properties: They are the get() and set() methods we use to access or modify values.

Data Property

A TypeScript data property is a key-value pair within an object that holds a value directly. It can store any type of data, such as strings, numbers, objects, or functions.

For example,

class Student {

  // Data property
  private _firstName: string = "Monica";
}

Accessor Property

In TypeScript, accessor properties are methods that get or set the value of an object. These are defined using the get and set keywords.

• get: to define a getter method to get the property value.
• set: to define a setter method to set the property value.

TypeScript Getter

In TypeScript, getter methods are used to access the (often private) properties of a class in a controlled way. For example,

class Student {
  // Data property
  private _firstName: string = "Monica";

  // Getter method
  get getName(): string {
    return this._firstName;
  }
}

const student = new Student();
 
// Accessing the getter
console.log(student.getName); 

Output

Monica

In the above program, a getter method getName() is created to access the property of an object.

get getName() {
    return this._firstName;
}

Note: To create a getter method, the get keyword is used.

And also when accessing the value, we access the value as a property.

student.getName;

console.log(student._firstName);

console.log(student.getName());

console.log(student.getName);

TypeScript Setter

In TypeScript, setter methods are used to update the values of class properties. For example,

class Student {
  private _firstName: string = 'Monica';

  // Getter method
  get firstName(): string {
    return this._firstName;
  }

  // Setter method
  set changeName(newName: string) {
      this._firstName = newName;
  }
}

const student = new Student();

console.log(student.firstName); // Monica

// Change(set) object property using a setter
student.changeName = 'Sarah';
console.log(student.firstName); // Sarah

In the above example, the setter method is used to change the value of an object.

set changeName(newName: string) {
    this._firstName = newName;
}

Note: To create a setter method, the set keyword is used.

As shown in the above program, the value of firstName is Monica.

Then the value is changed to Sarah.

student.changeName = 'Sarah';

Note: Setter must have exactly one formal parameter.

Example: TypeScript Getter and Setter

Now, let's write a separate program that has both the getter and setter methods. We'll also implement some custom logic inside the setter methods:

// Define a class named 'Person'
class Person {
  private _name = "";
  private _age = 0;

  // Getter for 'name'
  get name() {
    return this._name;
  }

  // Setter for 'name' - converts any value to string
  set name(value: string | number | boolean) {
    this._name = String(value);
  }

  // Getter for 'age'
  get age() {
    return this._age;
  }

  // Setter for 'age' - converts to number, uses 0 if invalid
  set age(value: string | number | boolean) {
    const num = Number(value);
    this._age = Number.isFinite(num) ? num : 0;
  }
}

const person = new Person();
person.name = "Alice";
person.age = "30";
console.log(person.name); 
console.log(person.age);

Output

Alice
30

Here, the Person class has two data properties: _name and _age. So, we've created their respective getter and setter methods.

We have implemented the following logic inside the setter methods:

• name() - This setter converts its argument to string type with the String() method and assigns it to the _name property.
• age() - This setter converts its argument to number type with the Number() method and assigns it to the _age property. If the argument is invalid, it sets _age to 0.

Read More:

• TypeScript Access Modifiers
• TypeScript Classes