HTMLElement type is automatically expanded

[ollieSk8]

1 . define a custom hook useClickOutside and recive a argument elementRef ,the elementRef type is Ref<null | HTMLElement>
2. define a dropdownRef type is null or HTMLElement
3. template has a div set ref attribute dropdownRef

Result :
Here I think there may be a problem with the implementation of volar. It will directly expand the HTMLElement type, causing a mismatch of types.

//template  <div class="dropdown" ref="dropdownRef">

// custom hook

const useClickOutside = (elementRef: Ref<null | HTMLElement>): Ref<boolean> => {
    //some other code
}
 const dropdownRef = ref<null | HTMLElement>(null)
 const isClickOutside = useClickOutside(dropdownRef) //  causing a mismatch of types.

[johnsoncodehk]

This may just a vue type problem. Please try move the code to *.ts to check if there is the same error.

[ollieSk8]

This may just a vue type problem. Please try move the code to *.ts to check if there is the same error.

sorry, I don’t understand too much, what's that mean "Please try move the code to *.ts"?

[johnsoncodehk]

Create foo.ts under same directory with Dropdown.vue, copy the Dropdown.ts script block code to foo.ts, and then check the error whether reproduce in foo.ts. (Similar to #415 (comment))

[ollieSk8]

Create foo.ts under same directory with Dropdown.vue, copy the Dropdown.ts script block code to foo.ts, and then check the error whether reproduce in foo.ts. (Similar to #415 (comment))

The same error occurred

[johnsoncodehk]

That confirmed this is pure TS problem not volar problem, please ask in Vue Land TS discord server.

[ollieSk8]

That confirmed this is pure TS problem not volar problem, please ask in Vue Land TS discord server.

ok ,thanks