Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
shiluo34 opened this issue Aug 24, 2022 · 7 comments
Closed

Comments

@shiluo34
Copy link
Contributor

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
Copy link
Contributor Author

fix pr: #12759 :D

@onepisYa
Copy link

I also had the same problem

@shiluo34
Copy link
Contributor Author

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
Copy link

onepisYa commented Sep 20, 2022

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
Copy link
Contributor Author

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
Copy link

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
Copy link
Contributor Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants