Setter Getter in TypeScript

[puddlejumper26]

Accessor properties. They are essentially functions that work on getting and setting a value, but look like regular properties to an external code.

1.0 getter

{get prop() { ... } }
{get [expression]() { ... } }

• create a pseudo-property
• not possible to simultaneously have a getter bound to a property and have that property actually hold a value
• must have exactly zero parameters

const obj = {
  log: ['example','test'],
  get latest() {            <==== a <pseudo-property> latest for object obj
    if (this.log.length === 0) return undefined;
    return this.log[this.log.length - 1];
  }
}

obj.latest = '123';      <==== attempting to assign a value to latest will not change it.
console.log(obj.latest); // "test"

1.1 deleting

delete obj.latest;                         <==== deleting
console.log(obj.latest); // undefined

1.2 Defining a getter on existing objects using defineProperty

const o = {a: 0};

Object.defineProperty(o, 'b', { get: function() { return this.a + 1; } });

console.log(o.b) // Runs the getter, which yields a + 1 (which is 1)

1.3 Smart / self-overwriting / lazy getters

private get getData(){ }

// here when it is called,

..... this.getData,             <=======

// and if without get

private getData() { }

// here when it is called

.... this.getData( );         <=======

2.0 setter

{set prop(val) { . . . }}
{set [expression](val) { . . . }}

• called when there is an attempt to set that property
• must have exactly one parameter
• must not appear in an object literal with another set or with a data entry for the same property.

const language = {
  set current(name) {
    this.log.push(name);
  },
  log: []
}

language.current = 'EN';
console.log(language.log); // ['EN']

language.current = 'FA';
console.log(language.log); // ['EN', 'FA']

private set setData(param: boolean) { }

// here is when it is called

..... this.setData = true;            <=======

// and if without set

private setData(param: boolean) { }

// here is  when it is called

.... this.setData ( true ) ;          <=======

Reference

[1] https://www.jackfranklin.co.uk/blog/es5-getters-setters/ [2] https://javascript.info/property-accessors