Getters and Setters in TypeScript

The Getters and Setters are known as accessor properties in TypeScript. They look like normal properties but are actually functions mapped to a Property. We use “get” to define a getter method and “set” to define a setter method. The Setter method runs when we assign a value to the Property. The Getter method runs when we access the Property.

What are Getters & Setters

The Getters and Setters are known as Accessor Properties in TypeScript.

The Properties of an object can be accessed in two ways. We can access them directly or through a function. Based on how we access them, the properties are classified as

  1. Data Properties
  2. Accessor Properties

The Data Property is mapped to a value. The value can be a primitive value, object, or function.

In the example below, the property color is data property. We can access its value as car.color or assign a new value to it using car.color="red";

The accessor property is not mapped to a value but to a function. We call this function as accessor function. It is the job of the function to store or retrieve the value.

The accessor function that retrieves the value of a property is known as the Getter method. We use the Get keyword to declare a Getter method.

The accessor function that assigns a value to a property is known as the Setter method. We use the Set keyword to declare a Setter method.

Creating Getters TypeScript

The following is the syntax of the getter method.

We use the get keyword followed by a function expression. The name of the function becomes the name of the property ( propName in the example).

The getter function executes when we read the value of the Property. Note that we cannot pass an argument to the getter method. The return value of the getter method becomes the value of the property access expression.

In the following example, color is a getter property, while _color is a regular Property. The color function returns the value of the _color property.

We access the color getter property just like any other Javascript Property. i.e. using the dot notation

Note that although the color is a function, we do not invoke it like a function i.e car.color(). But access it just like a property i.e. car.color

Creating Setters TypeScript

To create a setter method, we use the set keyword followed by a function expression. The name of the function becomes the name of the property ( propName in the following example). A ‘set’ accessor must have exactly one parameter.

The following is the syntax of the setter method.

The setter method executes when we assign a value to the property. JavaScript invokes the setter method with the value of the right-hand side of the assignment as the argument. If the setter method returns a value then it is ignored.

In the following example, color is a setter property, while _color is a regular Property. The color function accepts a value and updates the _color property.

Getter & Setters

The combined syntax for creating both setter and getter is as shown below.

The example code using both getter & Setter is as follows

When we access the car.color the getter method executes and it returns the value of the _color property.

We assign the car.color="red" the setter method executes. Inside the setter method, we assign the value to the property _color.

Notice that the color accessor property behind the scene uses the _color property to store the value. _color property is the backing property of the color accessor property. As a convention, we prepend the backing property with an underscore to indicate that _color should not be accessed directly.

Note that you cannot use the same name for an accessor property and a regular property.

Since ES6, you can also use the computed property names in getters & setters also. Simply enclose the expression inside square brackets( []).

Getter & Setters in TypeScript Classes

We can create getters and setters in TypeScript classes, in the same way, we create them in TypeScript objects.

In the Typescript Classes, we can use the private access Modifier and mark the backing property as private.

In this example, we use the TypeScript class to create a Car class, with getter and setter methods for the color property. We marked the backing property _color as private

Marking the backing property _color as private ensures that we do not accidentally modify its value directly. The Compiler throws the error Property <propertyName> is private and only accessible within class <className>.

Using Getters & Setters

Use getter or setter only when you need a specific functionality provided by them.

There is no need to use accessor methods if you are simply using them to get or set the data property as in the example below. Plain property access is a better option here.

But there are some use cases, where you can think of using the Getters & Setters.

Validating values

In the example below, we want to limit the rate field to 10, if the user assigns any rate above 10. This can be easily achieved by a setter method

Another use case is to log the values as the property is being read or written.

Read-only /Write-only Properties

We can use the Setters & getters to create read-only or write-only properties.

If the property has only a getter method, then it is a read-only property. If it has only a setter method then it is a write-only property

In the following example, we only define a get method, making the color property read-only. Setting the color property using an assignment ( car.color="red";) will result in a Compiler error and also an error while running the code

Similarly, you can create a write-only property by only defining the setter method. Any attempt to read the write-only property always returns undefined.

Leave a Comment

Your email address will not be published.

Scroll to Top