Error message in Typescript: Types of variables 'el' and 'el' are not compatible. This issue is related to the Vue 3 composition API

Question

I am encountering an issue while trying to utilize transition JavaScript Hooks in vue.js. The problem arises when I try to implement the @before-enter hook as described in the Vue documentation here: https://v3.vuejs.org/guide/transitions-enterleave.html#javascript-hooks

In the component's HTML, I have the following code snippet:

<transition name="fade" @before-enter="beforeEnter">
   <ul v-show="show">
      <p>hoge</p>
   </ul>
</transition>

And in the component's TypeScript file, I define the beforeEnter function like this:

const beforeEnter = (el:HTMLElement)=> {
    el.style.height = '0';
}

However, upon implementing this code, I receive the error message:

Type '(el: HTMLElement) => void' is not assignable to type '(el: Element) => void'.
  Types of parameters 'el' and 'el' are incompatible.ts(2322)

Can anyone help me figure out a solution to resolve this error?

Answer 1

Answer №1

The function handler produces a more generalized type. You may have to perform a cast.

const beforeEnter = (el:Element)=> {
    const hel = el as HtmlElement
    // const hel = el as unknown as HtmlElement
    hel.style.height = '0';
}

Trying to update your dependencies could potentially resolve the issue.

Answer 2

The function handler produces a more generalized type. You may have to perform a cast.

const beforeEnter = (el:Element)=> {
    const hel = el as HtmlElement
    // const hel = el as unknown as HtmlElement
    hel.style.height = '0';
}

Trying to update your dependencies could potentially resolve the issue.