Tuesday, September 4, 2018

Typescript - Learn get and set accessor method with examples | Encapsulation Tutorial

In this Blog Post, We are going to learn the get and set Accessor methods or Encapsulation in typescript.
typescript encapsulation tutorials with examples

Encapsulation Tutorial

It is one of the concepts of Object Oriented Programming. Other concepts are Classes, Interfaces ,Polymorphism and Abstract classes.
Each class or object contains two things
  • Data which will be stored in a member variables or properties
  • Functions/method code that manipulates the data or variables or properties.
In Encapsulation, Data is hidden from the outside world to access it directly, can be given access  via  methods/functions code
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 get accessor methods
  • Define the member variables as private keyword
  • Declare public set and get methods for update and read member variable

Compiler target options 

Typescript compiler does not support setters and getters accessor by default. To enable this, We need to modify typescript compiler options with target ES5.
tsc command configuration
 You have provided compiler options for tsc command tool
tsc --target ES5
Update tsconfig.json target options 
In Angular application, To support set and get accessor syntax, We have to modify tsconfig.json with compilerOptions - target - es5

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

Encapsulation Example

Here Employee object name is set as private, Private modifier properties allow to access it inside class only and will not be accessible outside. To make it simple, provided getter/setter methods for name and added public access modifier to access/manipulate outside class.
This is a set and get 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

Interface set and get Accessor methods

Typescript does not support setter/getters methods in interfaces directly. We have to use different syntax. The interface has to provide only member variable and did not provide an implementation for this properties. 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);

Related article


EmoticonEmoticon