Solution to fix “Accessors are only available when targeting ECMAScript 5 and higher” error in TypeScript

You can solve the error “Accessors are only available when targeting ECMAScript 5 and higher” by checking the setting in the tsconfig.json file and setting the target optional to es5 to match the condition to use the accessors. So let’s go into detail.

The reason of the error “Accessors are only available when targeting ECMAScript 5 and higher”

The error happens when you try to get property from a Class with a ‘private’ modifier, like the getter and setter method.

Example of how the error happens:

class Employee {
 private id: number = 0;
 
// ERROR: Accessors are only available when targeting ECMAScript 5 and higher.
  get ID() {
    return this.id;
  }
 
// ERROR: Accessors are only available when targeting ECMAScript 5 and higher.
  set ID(id: number) {
    this.id = id;
  }
}

Here I am coding with es3, which does not support the accessors method yet, so I will get the error.

The solution for this error

Setting target optional

To solve the error, you can set the target optional in the tsconfig.json file. This setting will help you to indicate that you will work with modern environment that allows using the accessors method. The minimal version that supports accessors method is es5.

Example:

{
  "compilerOptions": {
    "target": "es5",
    // Another code line
  }
}

// After using es5
class Account {
 private id: number = 0;
 // getter method
  get ID() {
    return this.id;
  }
 // setter method
  set ID(id: number) {
    this.id = id;
  }
 
}
 
const user1 = new Account()
console.log(user1.ID)
 
const user2 = new Account()
 
user2.ID = 2
console.log(user2.ID)

Output:

[LOG]: 0 
[LOG]: 2 

But you should set it to the es6 version because the browser almost supports all the es6 features.

You can see some modern features that introduce in es6:

// Default parameters
function logInfor(name: string , age: number ,country: string = 'England'){
    // Template Literals
    console.log( `${name} is ${age} years old and come from ${country}`)
}
 
logInfor('Tommy', 24)

Output:

[LOG]: "Tommy is 24 years old and comes from England" 

As you see, es6 provides some new features like default parameters that we can set a default value for parameters by assigning it with an equal symbol, and you can use template literals by using ${expression} syntax inside the grave accent pair.

Setting target in terminal

You can set the target optional by using a terminal command like this:

tsc src/index.ts --target es6

This command line means it will set –target optional to es6 for index.ts file in folder src.

Summary

In this article, I showed you how to solve the error “Accessors are only available when targeting ECMAScript 5 and higher”. You can set the target optional in the tsconfig.json file to solve it. Hope it is helpful to you.

Maybe you are interested:

• Property is private and only accessible within class in TypeScript
• The left-hand side of assignment expression may not be an optional property access

Brent Johnson

Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.

---

Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm