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

This issue has been created 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-07
Star Count 199821
Watcher Count 6092
Fork Count 32893
Issue Count 587

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
Add a method to retrieve original DataSource in ProxyDataSource 0 2022-05-18 2022-10-04
Latest build broken with scikit >= 0.22 0 2021-01-29 2022-09-24
Fix composer and tuner work in the multimodal case 0 2022-04-06 2022-09-24
Enable support for http proxy for alertmanager receivers 11 2022-06-07 2022-09-17
Pretrained LSeg on Pascal-5i, COCO-20i 5 2022-02-13 2022-10-04
about file 'mobilenetv2_jester_online.pth.tar' 5 2021-05-07 2022-10-06
spopt now on conda-forge 3 2021-01-18 2022-10-06
Cannot org-jira-get-summary and org-jira-get-issues fail request-default-error-callback 1 2020-07-31 2022-09-21
Constant high CPU usage on Rust projects when window is focused 2 2022-09-20 2022-09-14
Handle leak during search for youngest file 2 2021-07-25 2022-10-01
Charts are not shown on the page 12 2017-01-13 2022-09-28
[Bug] Translate Repeatables Error "Cannot use object of type stdClass as array" 3 2022-05-31 2022-10-01
error: divine.exe failed: spawn C:\Users\Devin\AppData\Roaming\Vortex\plugins\Vortex Extension Update - Baldur's Gate 3 v1.0.5\tools\divine.exe ENOENT 2 2022-01-17 2022-10-01
Incomplete history scanning (up arrow) 12 2022-06-30 2022-08-17
Found an unsupported model 'mijia.camera.v1' for class 'ChuangmiCamera'. 0 2022-08-12 2022-09-27
Possible to use as a solution to omitted letters? 1 2020-12-17 2022-07-23
FFmpeg 5 backport in stable branch 12 2022-05-02 2022-09-21
Gas estimation issues with batched ERC20 transfers. 0 2021-03-11 2022-07-10
Plugin hook for dynamic metadata 22 2021-06-26 2022-09-28
bug描述:深度终端无法记住远程管理密码 18 2022-04-15 2022-09-24
Plugin support for HA 0 2021-10-11 2022-09-28
About transaction execution performances 4 2022-02-17 2022-03-27
system build requirements question 3 2020-08-22 2022-08-24
How to get libssr-local.so 1 2021-10-20 2021-12-18
Tag or feature to distinguish sites that have images of setups 0 2022-06-14 2022-10-04
Program crashes with broken pipe error when using '--video-codec copy' on Windows 10 3 2021-10-10 2022-09-13
Stack-buffer-overflow src/jsvar.c:910 in jsvNewFromString 1 2021-12-21 2022-10-04
Auto redirect to http://sentora.org/?reqp=1&reqr= 3 2016-09-13 2022-08-11
路由拦截逻辑放在基座中,那在基座如何拦截微应用内部的路由呢? 0 2022-08-09 2022-09-30
api for getting pageviews 0 2021-04-12 2022-09-22
Bug: WebSocket连接关闭的问题 1 2022-05-25 2022-09-30
ClassAlreadyExistsException for Enum creation 4 2022-01-10 2022-10-04
Improve release flow 1 2022-08-17 2022-09-23
ui: create ui pages for active queries and transactions 0 2022-03-28 2022-08-03
`-target arm-linux-musleabi` builds musl with hard floats enabled. 0 2022-02-21 2022-07-19
Error appears when using `dropInstance` on logout of application (MacOS Chrome, defaults to IndexedDB) 1 2021-02-18 2022-09-13
[FEATURE] Config file support 2 2021-07-24 2022-09-30
Android Basics issue: i am having issue installing my HAXM for the pass 5 days now 0 2022-01-23 2022-08-21
`TIMEOUT: Timeout exceeded` error trying `tok = CoreNLPTokenizer()` 15 2017-08-04 2022-09-23
Consider moving downloaded protoc binaries into a separate crate 3 2020-04-05 2022-10-04
[Feature Request] QMK CLI version check on startup 0 2021-09-19 2022-09-28
Can't start KitchenSink using QR code shown in readme 4 2022-07-11 2022-09-30
[Listen] Repeated question gets no answers 1 2022-05-25 2022-09-23
UWP XAML item templates should not be available in a WinUI 3 C++ project 6 2021-08-25 2022-09-24
No inference for TypeVar in Callable (aka unable to annotate decorator factory) 12 2022-08-05 2022-09-01
Prettier ignore isn't working on an import in javascript 2 2022-08-05 2022-10-03
Kodi iOS error installing AltStore 1 2022-05-18 2022-08-29
Upgrade cron library to v3 5 2021-11-10 2022-09-28
[Flaky test] [sig-node] Pods Extended Pod Container lifecycle should not create extra sandbox if all containers are done 2 2022-03-29 2022-09-30
[Security Empty State] Glitch before entering empty state 2 2022-01-10 2022-10-05