Unexpected token. A constructor, method Error in TS

avatar

Borislav Hadzhiev

Last updated: Mar 3, 2022

banner

Photo from Unsplash

Unexpected token. A constructor, method Error in TS #

The "Unexpected token. A constructor, method, accessor, or property was expected" error occurs when we use the var or let keywords to declare a class property or the function keyword in a class. To solve, the error remove the var, let and function keywords from your class.

Here are 2 examples of how the error occurs.

index.ts
class A { // ⛔️ Error (using var, let) var a: number = 100; let b: string = 'hello'; // ⛔️ Error: Unexpected token. A constructor, // method, accessor, or property was expected.ts(1068) function myFunction() { } }

We used the var and let keyword to assign properties to the class and the function keyword to declare class method.

To solve this, remove the var, let and function keyword from your class.

index.ts
class A { a = 100; b = 'hello'; myFunction() { console.log(this.a); } } const myInstance = new A(); console.log(myInstance.a); // 👉️ 100 console.log(myInstance.b); // 👉️ "hello" myInstance.myFunction(); // 👉️ 100

The class above has 2 propertied - a and b and a method named myFunction.

You will often have to take arguments when creating class instances. You can do that via the constructor method.

index.ts
class A { constructor(public a: number, public b: string) { this.a = a; this.b = b; } myFunction() { console.log(this.a); } } const myInstance = new A(1337, 'world'); console.log(myInstance.a); // 👉️ 1337 console.log(myInstance.b); // 👉️ "world"

Notice that we assigned the a and b properties inside of the constructor method and we aren't using the var, let or function keywords anywhere inside of the class.

The class in the example above is a more concise version of the following class.

index.ts
class A { a: number; b: string; constructor(a: number, b: string) { this.a = a; this.b = b; } myFunction() { console.log(this.a); } } const myInstance = new A(1337, 'world'); console.log(myInstance.a); // 👉️ 1337 console.log(myInstance.b); // 👉️ "world"

We had to type the a and b class properties twice to achieve the same result.

The previous example with the explicit use of the public keyword in the constructor is more widely used.

You can also use default values for constructor parameters.

index.ts
class A { constructor(public a = 100, public b = 'hello') { this.a = a; this.b = b; } myFunction() { console.log(this.a); } } const myInstance = new A(); console.log(myInstance.a); // 👉️ 100 console.log(myInstance.b); // 👉️ "hello"

We created an instance of the class without passing any parameters to the constructor function, so the a and b properties are set to the default values.

You can also use arrow functions for class methods.

index.ts
class A { constructor(public a = 100, public b = 'hello') { this.a = a; this.b = b; } myFunction = () => { console.log(this.a); }; } const myInstance = new A(); console.log(myInstance.a); // 👉️ 100 console.log(myInstance.b); // 👉️ "hello" myInstance.myFunction(); // 👉️ 100

Notice that we aren't using the const, let or var keywords in the method's definition.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.