Typescript set get methods | Typescript Encapsulation

In this Blog Post, learn the get and set Accessor methods or Encapsulation in typescript.

What is Encapsulation in Typescript?

It is one of the concepts of Object-Oriented Programming. Other concepts are

Each class or object contains two things.

member variables or properties to store data
Functions/method code that manipulates the data or variables or properties.

Data is protected from the outside world thus it can’t be accessed directly, but it can be accessed via methods/functions code. These methods or functions are called setter and getter

This enables the developer to access the data at the specific entry point and easy to debug the code when anything error occurred.

Typescript provides encapsulation using set and gets accessor methods

Define the member variables as private keyword
Declare public set and get methods for updating and reading member variable

As typescript is static type checking, there is no code generated while compiled to javascript.

How to enable setters and getters using Compiler target options?

The typescript compiler does not support setters and getters accessors by default.

To enable this, We need to modify typescript compiler options with target ES5. Otherwise,”error TS1056: Accessors are only available when targeting ECMAScript 5 and higher.” is thrown.

tsc command configuration
You have provided compiler options for the tsc command tool.

tsc --target ES5

Update tsconfig.json target options In the Angular application, To support set and get accessor syntax, We have to modify tsconfig.json with compilerOptions - target - es5

{
    "compilerOptions": {
        "target": "es5"
            ........
  }
}

Typescript Encapsulation Example

Here Employee object name is set as private, Private modifier properties allow access inside the class only and will not be accessible outside.

To make it simple, provided getter/setter methods for the name and added public access modifier to access/manipulate outside class.
This is a set and gets accessor method example

export class Employee {
  private _name: string;

  constructor() {}

  public get name(): string {
    return this._name;
  }

  public set name(val: string) {
    this._name = val;
  }
}
export default Employee;

Advantages

Data is hidden and enables data to be accessible via get and set accessor methods.
It is very easy to debug when checking property variable data for correctness

Typescript Interface set and get Accessor methods

Typescript does not support setter/getters methods in interfaces directly. We have to use a different syntax.

The interface has to provide only member variables and did not provide an implementation for these properties.

The implementation class use setters and getters to access the member variable.

interface MyInterface {
  name: string;
}

class MyClass implements MyInterface {
  private name: string = "Kiran";

  public get name() {
    return this._name;
  }

  public set name(value: string) {
    this._name = value;
  }
}

var myClass = new MyClass();
console.log(myClass.name);

Typescript setter and getter naming convention

setter and getter should not have complex logic
suffix of get and set should have the same name
get and set are reserved keywords in the typescript