Description of Issue

I was reviewing my code for one of my projects when I noticed that one of my function's name is coloured green while all of the other functions are yellow.

When I hover over the function in the readButton.addEventListener("click", toggleRead); it says: Class toggleRead - function toggleRead(e: any): void

Also, when I hover over the actual function declaration, it says This constructor function may be converted to a class declaration.ts(80002)

Additional Info

I am using the toggleRead function to toggle an attribute. The this keyword refers to the button that calls the function. It doesn't seem to cause any issues in my program and it is working as intended.

Question

Am I breaking some kind of code convention that results in this hint, or am I otherwise doing something wrong? Also, why does visual studio think this function is a constructor?

Similar Issue

I found this question on stack overflow but the person asking the question is only interested in turning the hint off. I want to know if I did something wrong.

Code

readButton.addEventListener("click", toggleRead);

// Toggle book read
function toggleRead(e) {
    const bookIndex = getBookIndex(this);
    const bookObject = library.at(bookIndex);
    if (bookObject.read) {
        bookObject.read = false;
        this.setAttribute("is-read", "false");
        this.innerHTML = "Unread";
    } else {
        bookObject.read = true;
        this.setAttribute("is-read", "true");
        this.innerHTML = "Read";
    }
}

CodePudding user response：

As mentioned in the comments, the analyzer probably marks it as a constructor because of how it's defined what is inside of it, which resembles how a constructor would be written.

A solution may be to define it using const and a lambda expression, as follows.

Change the first line:

function toggleRead(e) {

to this:

const toggleRead = (e) => {

An additional benefit of using lambda notation is that you can use such functions without first calling bind on them.
So if you are now doing this.toggleRead = this.toggleRead.bind(this); then you can safely remove it because the this inside a lambda is by default always the object in which the lambda is being created.

CodePudding user response：

I wanted to post Raymond's recommendation from their comment under my question as this resolved the issue for me:

The solution was to replace this with the more idiomatic e.currentTarget.

// Toggle book read
function toggleRead(e) {
    const bookIndex = getBookIndex(e.currentTarget);
    const bookObject = library.at(bookIndex);
    if (bookObject.read) {
        bookObject.read = false;
        e.currentTarget.setAttribute("is-read", "false");
        e.currentTarget.innerHTML = "Unread";
    } else {
        bookObject.read = true;
        e.currentTarget.setAttribute("is-read", "true");
        e.currentTarget.innerHTML = "Read";
    }
}