Question 135307 in Visual Studio Code Question posted in
View the official documentation.

Why is Visual Studio Code recognizing my function as a constructor function?

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.

enter image description here

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";
    }
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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";
    }
}

  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search