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

This issue has been tracked since 2022-08-24.

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>'.

image

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
    image

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

What is expected?

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

What is actually happening?

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

shiluo34 wrote this answer on 2022-08-25

fix pr: #12759 :D

onepisYa wrote this answer on 2022-09-21

I also had the same problem

shiluo34 wrote this answer on 2022-09-21

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 wrote this answer on 2022-09-21

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 wrote this answer on 2022-09-21

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 wrote this answer on 2022-09-28

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 wrote this answer on 2022-09-29

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

More Details About Repo
Owner Name vuejs
Repo Name vue
Full Name vuejs/vue
Language TypeScript
Created Date 2013-07-29
Updated Date 2022-10-05
Star Count 199788
Watcher Count 6093
Fork Count 32878
Issue Count 590

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date