Angular 2 (or 4) object serialization

Question

Recently come across the following conundrum:

Standards

The Typescript documentation suggests creating object definitions with private members having an underscore prefix, allowing getters/setters to utilize the original 'name' of said members, providing indirect public access (as they should).

The Angular documentation recommends otherwise, however does not provide an example of using getters & setters for the private variable in their object definition example.

The Issue

I've been following the Typescript coding standard to the most extent. Take the following class for example:

public class Foo{
    private _bar:string;

    constructor(){ this._bar='Baz'; }

    get bar():string{return this._bar}
}

Using the following code to serialize it into JSON:

console.log(JSON.stringify(new Foo()));

...will produce:

{
    '_bar': 'Baz'
}

Questions

1. Taking into account these are 'guidelines' and simply recommendations, what would be the Angular-way of handling an object definition, allowing for direct serialization?
2. In my example, surely the private access modifier shouldn't allow direct access to the value of it? What have I missed in my understanding of using the private access modifier here?

I've done a fair share of reading to other articles and StackOverflow posts regarding different ways of handling serialization, want to deter from the 'how', and rather ask 'why' with regards to the behavior mentioned.

Any feedback would be greatly appreciated! :)

Kind regards

Solution

You can customize serialization by implementing toJSON()

public class Foo{
    private _bar:string;

    constructor(){ this._bar='Baz'; }

    get bar():string{return this._bar}

    toJSON() {
      return {bar: _bar};
    }

    static fromJSON(json) {
      ...
    }
}

See also http://choly.ca/post/typescript-json/

Getters and setters are pure TypeScript language feature and entirely unrelated to Angular.

private is only for static analysis in TypeScript. When it's transpiled to JS private won't exist anymore. It becomes a plain old JS object and JSON.stringify treats it like that.

Comments

[jarodsmk]

This is probably the route I'm going to take to solve my issue, but really wanted to gain more of an understanding behind the Angular implementations of accessors/mutators (if any) and the accessibility modifier use here

[Günter Zöchbauer]

I don't see anything related to Angular here. Angular (2 - 4) doesn't have any accessors or mutators. If you're talking about AngularJS 1.x than you should change the tag from angular to angularjs

[jarodsmk]

Oh really? I've been completely oblivious to this - I was under the assumption that angular 2.x+ did suggest using accessors & mutators. Is there any source you know of where the discussion sparked to remove this?

[Günter Zöchbauer]

Remove what? I never heard of accessors or mutators in relation to Angular (2 - 4).

[jarodsmk]

Remove accessors & mutator code from Angular 2 object definitions, and I am still talking about Angular 2 onwards, so I'll keep my tag as is :)

[jarodsmk]

Also - got any feedback on my second question sir?

[Günter Zöchbauer]

private is only for static analysis in TypeScript. When it's transpiled to JS private doesn't exist. It's just a plain old JS object.

[Günter Zöchbauer]

Still not sure what you mean with "accessors & mutators". Perhaps you just mean getters and setters.

[jarodsmk]

Ah thanks for that, and yes I was referring to getters/setters :) To clarify, do you know why the Angular team decided against the philosophy of using getters & setters in object definitions in Angular 2 onwards?

[Günter Zöchbauer]

Getters and setters are pure TS and entirely unrelated to Angular. The Angular team didn't have to decide anything here. Sorry, I don't understand where the misunderstanding is and how to provide a better answer.

[jarodsmk]

No that's perfect, would you mind adding what you just said to your answer & I'll mark it as correct when I'm allowed to? Thanks for the engaging conversation :)