Naming convention for class properties in TypeScript

Question

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?

Using the get and set property of TypeScript produces the error.

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

Answer 1

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'.

Answer 2

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);
}