[2.7.x] Here is a type error when using ref() on attribute 'ref' in TSX

[shiluo34]

Version

2.7.10

Reproduction link

codesandbox.io

Steps to reproduce

Using type 'Ref' on ref will notice the error : jsx.d.ts(1305, 3): The expected type comes from property 'ref' which is declared here on type 'ElementAttrs<HTMLAttributes>'.

In the vue/types/jsx.d.ts, the type ReservedProps only support type'String' in Vue2.7.x，but supporting type 'String'/'Ref'/'Function' in Vue3.x

• Vue3 - jsx.d.ts
  

• Vue2.7.x -jsx.d.ts
  

What is expected?

Using type 'Ref' on the property 'ref'.

What is actually happening?

The type 'ref' only support 'String | undefined'.

[shiluo34]

fix pr: #12759 :D

[onepisYa]

I also had the same problem

[shiluo34]

I also had the same problem

yep, but this PR has`t been merged yet, i dont know whether something wrong with the PR or not :(

[onepisYa]

I also had the same problem

yep, but this PR has`t been merged yet, i dont know whether something wrong with the PR or not :(

Had the same problem using ts and function-refs in vue 2.7.x.

example:

<input :ref="(el) => { /* assign el to a property or ref */ }">

[shiluo34]

I also had the same problem

yep, but this PR has`t been merged yet, i dont know whether something wrong with the PR or not :(

Had the same problem using ts and function-refs in vue 2.7.x.

example:

<input :ref="(el) => { /* assign el to a property or ref */ }">

When I intend to modify this pr to add funciton ref type, I found someone has already created the pr about this #12763

[onepisYa]

I also had the same problem

yep, but this PR has`t been merged yet, i dont know whether something wrong with the PR or not :(

Had the same problem using ts and function-refs in vue 2.7.x.
example:
<input :ref="(el) => { /* assign el to a property or ref */ }">

When I intend to modify this pr to add function ref type, I found someone has already created the pr about this #12763

Even after these two fixes, the el in the function-ref example still hints that implicitly has type any.

Writing functions directly in template can effectively use closures to access variables that are traversed by v-for. But it is not accessible in setup or methods options, so how should this problem be solved.

[shiluo34]

I also had the same problem

yep, but this PR has`t been merged yet, i dont know whether something wrong with the PR or not :(

Had the same problem using ts and function-refs in vue 2.7.x.
example:
<input :ref="(el) => { /* assign el to a property or ref */ }">

When I intend to modify this pr to add function ref type, I found someone has already created the pr about this #12763

Even after these two fixes, the el in the function-ref example still hints that implicitly has type any.

Writing functions directly in template can effectively use closures to access variables that are traversed by v-for. But it is not accessible in setup or methods options, so how should this problem be solved.

I have updated my pr with fixing the function-refs type error. Defined type Function cant fix the question in #12763. I refer to the type define of vue3 ref type definition. But you should define the el type when using the funtion refs,
just like

const fooRef = ref<HTMLElement>()

<div ref={(el) => {fooRef.value = el as HTMLElement}} /> 

its same as vue3. :D