Naming convention for class properties in TypeScript

30
votes

According to the offical style guide you should

Avoid prefixing private properties and methods with an underscore.

As I come from a Java background, I usually would just use the this keyword: 

export default class Device {
    private id: string;

    constructor(id: string) {
        this.id = id;
    }

    public get id(): string { // [ts] Duplicate identifier 'id'.
        return this.id;
    }

    public set id(value: string) { // [ts] Duplicate identifier 'id'.
        this.id = value;
    }
}

But the TypeScript compiler complains: [ts] Duplicate identifier 'id'.

Is there a convention or best practice for parameter naming in a TypeScript constructor?

EDIT
Sorry I missed the essential part of the code which actually causes the TS compiler error.
Using the get and set property of TypeScript produces the error.

So my updated question: Is there a way to follow the style guide and also use the get/set properties of TypeScript?

3
typescriptparametersnaming-conventions
Unfortunately best practice centred questions are not a good fit for Stack Overflow as they will mainly spawn opinion-based answers ("I like doing it this way...", "people generally use this..."). While you may see answers on other questions based on what the author considers "best practice", specifically asking for them is off-topic. For more information, see the help center. You may want to remove the off-topic part from your question and instead focus solely on the technical issue. – Kyll
No, the compiler doesn't complain. Your example is valid. – Paleo
sorry I updated my question I was missing some code which actually causes the error. – lenny
you can't have that, since they all end up as properties on the same js object. – toskv
In your case, you can replace your get id() / set id(val) by a simple instance variable id, declared as public. Easier to read and to write, and more performant. – Paleo

3 Answers

37
votes

Answer

If you want to use get and set accessors, you have to prefix the private property with underscore. In all other cases don't use it. I would say using underscore with accessors is a special case and although it's not explicitly written in Coding guidelines, it doesn't mean it's wrong. They use it in the official documentation.

Reason for the underscore

For start, I would like to emphasize the difference between field and property. In standard high level OOP languages like Java or C#, field is a private member which shouldn't be visible to other classes. If you want to expose it with encapsulation in mind, you should create a property.

In Java you do it this way (it is called Bean properties):

private int id;

public int getId() {
    return this.id;
}

public setId(int value) {
    this.id = value;
}

Then you can access the property by calling these methods:

int i = device.getId();
device.setId(i);

//increment id by 1
device.setId(device.getId() + 1);

On the other hand, C# was designed so that it's much easier to use properties:

private int id;

public int Id {
    get {
        return this.id;
    }
    set {
        this.id = value;
    }
}

(value is always the assigned value.)

You can directly assign values to these properties or get the property values.

int i = device.Id;
device.Id = i;

//increment id by 1
device.Id++;

In plain JavaScript, there are no real fields, because the class members are always public; we simply call them properties.

In TypeScript, you can define "true" C#-like properties (with encapsulation). You use Accessors for that.

private _id: number;

public get id(): number {
    return this._id;
}

public set id(value: number) {
    this._id = value;
}

Usage:

let i: number = device.id;
device.id = i;

//increment id by 1
device.id++;

You have to use underscore here because of two reasons:

  1. In JavaScript, all class members are public. Therefore, by putting an underscore before private property, we sign, that this property (field) is private and should be accessed by its public property only.
  2. If you named both the private and the public property with the same name, the JavaScript interpreter wouldn't know whether to access the private or public property. Thus you get the error you're writing about: [ts] Duplicate identifier 'id'.
1
votes

If the question is strictly :

Is there a way to follow the [typeScript] style guide and also use the get/set properties of TypeScript?

Where the TypeScript Style Guide says :

Avoid prefixing private properties and methods with an underscore.

Then you can use the $ (dollar sign) instead of the _ (underscore) to prefix your private fields. In this way you both get rid of the [ts] Duplicate identifier 'blablabla' error while still respecting the TypeScript Style Guide.

In addition, but it is just my opinion, the .$combination is more readable than the ._combination.

1
votes

For properties accessors you use _.

See sample from Microsoft https://www.typescriptlang.org/docs/handbook/classes.html#accessors:

const fullNameMaxLength = 10;

class Employee {
  private _fullName: string;

  get fullName(): string {
    return this._fullName;
  }

  set fullName(newName: string) {
    if (newName && newName.length > fullNameMaxLength) {
      throw new Error("fullName has a max length of " + fullNameMaxLength);
    }

    this._fullName = newName;
  }
}

let employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {
  console.log(employee.fullName);
}