How to solve error ‘this’ implicitly has type ‘any’ in TypeScript

Posted on by Brent Johnson
this’ implicitly has type ‘any’ error in TypeScript

The “this’ implicitly has type ‘any'” error in TypeScript related to class. If you don’t know how to solve it, read this article to find the best solution. Let’s go into detail.

The reason for “‘this’ implicitly has type ‘any'” error in TypeScript

This error happens when you try to use the this keyword outside of classes or somewhere that doesn’t support the this keyword. I have an example of how errors happen.

Example:

class Infor {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getNameMethod() {
        return function () {
            return this.name;
        };
    }
}

Error:

'this' implicitly has type 'any' because it does not have a type annotation.

Here with the function which I return in getNameMethod() I had created a new scope that nested inside the function, then the this keyword can’t touch to will have any type by default.

The solution to fix this error

Use the arrow function

The arrow function will help you solve the problem because the arrow function doesn’t have the this keyword. Now this keyword will be up to the parent scope, which is the class scope. So this now will reference classes or instances of classes.

Example:

class Infor {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getNameMethod() {
        return () => {
            return this.name;
        };
    }

    getAgeMethod() {
        return () => {
            return this.age;
        };
    }
}

const thomas = new Infor("Thomas", 28);
const thomasName = thomas.getNameMethod();
const thomasAge = thomas.getAgeMethod();
console.log(thomasName());
console.log(thomasAge());

Output:

"Thomas"  
28

Here with the arrow function, I can make a function without making scope. Then the this keyword in this situation will refer to the ‘thomas’ instance, and we don’t get the error anymore.

Store in a variable

We could also store the this keyword by assigning it to a variable, and that variable will become an instance of the class. We can use that variable on a freeway.

Example:

class Infor {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getNameMethod() {
        const thisKeyword = this;
        return function () {
            return thisKeyword.name;
        };
    }

    getAgeMethod() {
        const thisKeyword = this;
        return function () {
            return thisKeyword.age;
        };
    }
}

const thomas = new Infor("Thomas", 28);
const thomasName = thomas.getNameMethod();
const thomasAge = thomas.getAgeMethod();
console.log(thomasName());
console.log(thomasAge());

Output:

"Thomas" 
28

Here I assign the this keyword to a variable name thisKeyword so that I can use it like an instance of class Infor within a function.

Ignore the error

If you want to ignore the error, you can set it inside tsconfig.json by this code line:

“noImplicitThis”: false

Example:

{
	“compilerOptions”:{
        // Some code line ...
        “noImplicitThis”: false
    }
}

With that line, Typescript will know you don’t want it to throw errors when the this keyword is implicitly set to any type.

Summary

In this tutorial, I have explained how to solve: “‘this’ implicitly has type ‘any'” error in TypeScript. You can use the arrow function to use the this keyword or can assign the this keyword to a variable and can use it inside of the function.

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *