Angular 2 templates methods vs getters

Question

I'm wondering if there is any benefit to do this:

  <div>{{getSomething()}}</div>    export class MyComp {     getSomething() { return ...}   } 

Over this:

 <div>{{getSomething}}</div>   export class MyComp {    get getSomething() { return ...}  } 

Use methods vs getters to display calculated data.

Answer 1

I looked deeper into this and played with typescript Playground. I declared two classes one with getter and the second with get method as described in your questions.

Lets see how it looks like:

In the first example we declared a method for getting the property value in the following way:

class Greeter {   greeting: string;   constructor(message: string) {       this.greeting = message;   }    getGreeting() {       return this.greeting;   } } 

Which after translation to javascript it looks like:

var Greeter = (function () {    function Greeter(message) {        this.greeting = message;    }    Greeter.prototype.getGreeting = function () {        return this.greeting;    };    return Greeter; }()); 

And regarding the second example where we declared a getter in the following way:

class GetterGreeter {    _greeting: string;    constructor(message: string) {        this._greeting = message;    }     get greeting() {        return this._greeting;    } } 

Which after translation looks like:

var GetterGreeter = (function () {    function GetterGreeter(message) {        this._greeting = message;    }    Object.defineProperty(GetterGreeter.prototype, "greeting", {        get: function () {            return this._greeting;        },        enumerable: true,        configurable: true    });    return GetterGreeter; }()); 

(You can play with the declaration and the translation to javascript here)

As you can see with get method (as in your first example) the method is declared on the prototype and in your second example using the getter pattern typescript uses the defineProperty api.

In both cases we are invoking a method and angular will also call a method during its change detection to identify changes and re-render.

As I see it this is only a syntactic sugar for the same approach and I don't see any performance benefit for one of the methods.