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