Why are underscores added to fields of a typescript class in angular4?

Question

I am building an Angular4 project and using IntelliJ. Whenever I create a new class, and then add getters and setters. The IDE adds underscores to the fields.

Being that typescript syntax seems to be recognised automatically by the IDE and yet creates the fields in this way, leaves me to think that this is a best practice, but I have also read that this should not be done.

Why does the IDE do this? And should I allow it to do this for an angular project? Thanks for any help!

Before creating the getters and setters

export class Test {     hello:string;   world:string;   } 

After creating the getters and setters

export class Test {     private _hello:string;   private _world:string;    get hello(): string {     return this._hello;   }    set hello(value: string) {     this._hello = value;   }    get world(): string {     return this._world;   }    set world(value: string) {     this._world = value;   } } 

Answer 1

The getter/setter cannot have the name that matches the property name - the following won't work:

class A {    get world() {       return this.world;    } } 

So the general pattern is to name the internal properties just like a setter/getter only with the edition of an underscore:

class A {    get world() {       return this._world;    } } 

Since JS and therefore TS lacks runtime encapsulation, an underscore usually signifies internal/private/encapsulated property/variable.

But nothing forces you to use underscores. If you name your getter/setter differently, you can avoid adding underscores:

class A {    get getWorld() {       return this.world;    } }    

Answer 2

You can specify a different prefix to be used for fields in Settings | Editor | Code Style | TypeScript | Code Generation, Naming conventions/Field prefix. But note that leaving the prefix empty will result in TS2300:Duplicate identifier errors