Fix - A class member cannot have the 'const' keyword in TS

Fix - A class member cannot have the 'const' keyword in TS #

The error "A class member cannot have the 'const' keyword" occurs when we use the const keyword to declare a property in a class. To solve the error, remove the const keyword and use the readonly modifier to indicate that a class property should not be changed.

Here is an example of how the error occurs.

index.ts

Copied!
class Employee {
  // ⛔️ A class member cannot have the 'const' keyword.ts(1248)
  const name = 'James';
}

We can't use the const keyword when declaring a class property. Instead, use the readonly modifier.

index.ts

Copied!
class Employee {
  readonly name = 'James';
  readonly age = 24;

  logName() {
    console.log(this.name);
  }
}

const emp = new Employee();

emp.logName(); // 👉️ "James"

console.log(emp.name); // 👉️ "James"

We used readonly modifiers to prevent assignment to class properties outside of the constructor.

When using this approach, we are still able to change the value of the properties inside of the constructor function.

index.ts

Copied!
class Employee {
  readonly name: string = 'James';
  readonly age: number = 24;

  constructor() {
    this.name = 'Freddy';
    this.age = 29;
  }

  logName() {
    console.log(this.name);
  }
}

const emp = new Employee();

console.log(emp.name); // 👉️ "Freddy"

Assignment outside of the constructor would cause the type checker to issue an error.

index.ts

Copied!
class Employee {
  readonly name: string = 'James';
  readonly age: number = 24;

  constructor() {
    this.name = 'Freddy';
    this.age = 29;
  }

  logName() {
    console.log(this.name);
    // ⛔️ Cannot assign to 'name' because it
    // is a read-only property.ts(2540)
    this.name = 'Bobby';
  }
}

If you don't want to be able to change the value in the constructor, you can use the static keyword with readonly.

index.ts

Copied!
export class Employee {
  // 👇️ public if you need to access from outside the class
  public static readonly department = 'Accounting';

  // 👇️ private if you need to access only from inside this class
  private static readonly salary = 100;

  // 👇️ protected if you need to access only from this class
  // and its subclasses
  protected static readonly age = 30;

  logSalary() {
    console.log(Employee.salary);
    console.log(Employee.age);
  }
}

// 👇️ Access on class (NOT on instances)
console.log(Employee.department);

When using the static keyword, we define static methods or properties. Static methods and properties are not accessed on instances of the class, they are accessed on the class itself.

The department property in the example is declared as public. Properties declared as public can be accessed anywhere.

You should use public when you need to access the specific property from outside the class.

Private visibility only allows access from inside the class.

Members marked as protected are only visible to the class itself and its subclasses.

Make sure you are accessing static properties and methods on the class, e.g. Employee.myProperty, and not on instances of the class.

If you don't like any of the approaches covered in this article, you can declare a constant outside of the class and use it in the class.

index.ts

Copied!
const name = 'Frank';

export class Employee {
  logName() {
    console.log(name);
  }
}

const employee = new Employee();

employee.logName(); // 👉️ "Frank"

Fix - A class member cannot have the 'const' keyword in TS

Fix - A class member cannot have the 'const' keyword in TS #

Borislav Hadzhiev