Converting JS to TS for Angular: error TS2683: 'this' implicitly has type 'any'-CodePudding

So I'm migrating my website to Angular and I'm getting this error when trying to compile the js into ts for my navbar. Looked around and found similar issues from other users but they weren't using it in the same context.

Here is the full script and ive commented where the error is:

document.addEventListener("DOMContentLoaded", function(event) {

  const showNavbar = (toggleId, navId, bodyId, headerId) => {
    const toggle = document.getElementById(toggleId),
      nav = document.getElementById(navId),
      bodypd = document.getElementById(bodyId),
      headerpd = document.getElementById(headerId)

    // Validate that all variables exist
    if (toggle && nav && bodypd && headerpd) {
      toggle.addEventListener('click', () => {
        // show navbar
        nav.classList.toggle('show')
        // change icon
        toggle.classList.toggle('bx-x')
        // add padding to body
        bodypd.classList.toggle('body-pd')
        // add padding to header
        headerpd.classList.toggle('body-pd')
      })
    }
  }

  showNavbar('header-toggle', 'nav-bar', 'body-pd', 'header')

  /*===== LINK ACTIVE =====*/
  const linkColor = document.querySelectorAll('.nav_link')

  function colorLink() {
    if (linkColor) {
      linkColor.forEach(l => l.classList.remove('active'))
      this.classList.add('active') //error TS2683: 'this' implicitly has type 'any' because it does not have a type annotation.
    }
  }
  linkColor.forEach(l => l.addEventListener('click', colorLink))

  // Your code to run since DOM is loaded and ready
});

Any help is highly appreciated.

Thank you

CodePudding user response：

You might just need to add the type for this to your click function.

https://www.valentinog.com/blog/this/#typescript-and-this

function handleClick(this: HTMLElement) {
console.log("Clicked!");
this.removeEventListener("click", handleClick);
}

CodePudding user response：

You should use the event argument passed to your callback. You can then use event.currentTarget to figure out which link_color element was actually clicked.

  function colorLink(event: Event) {
    if (linkColor) {
      linkColor.forEach(l => l.classList.remove('active'))
      event.currentTarget.classList.add('active') //error TS2683: 'this' implicitly has type 'any' because it does not have a type annotation.
    }
  }

See documentation for Event.currentTarget for more info.

As an added bonus, this will work whether you use arrow functions or not...

  const colorLink = (event: Event) => {
    if (linkColor) {
      linkColor.forEach(l => l.classList.remove('active'))
      event.currentTarget.classList.add('active') //error TS2683: 'this' implicitly has type 'any' because it does not have a type annotation.
    }
  };

CodePudding user response：

function colorLink() {
    if (linkColor) {
      linkColor.forEach(l => l.classList.remove('active'))
      this.classList.add('active') //error TS2683: 'this' implicitly has type 'any' because it does not have a type annotation.
    }
}

Write this as an arrow function. this keyword is in the function scope, not the event listener scope.

So that part should be:

const colorLink = () => {
    if (linkColor) {
      linkColor.forEach(l => l.classList.remove('active'))
      this.classList.add('active') //error TS2683: 'this' implicitly has type 'any' because it does not have a type annotation.
    }
}