Skip to content

Commit 87f69aa

Browse files
authored
fix(types): support Ref and function types in tsx ref attribute (#12759)
fix #12758
1 parent 5d26f81 commit 87f69aa

File tree

2 files changed

+17
-2
lines changed

2 files changed

+17
-2
lines changed

types/test/v3/tsx-test.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { VNode, defineComponent } from '../../index'
1+
import { VNode, defineComponent, ref } from '../../index'
22
import { expectType } from '../utils'
33

44
expectType<VNode>(<div />)
@@ -22,6 +22,11 @@ expectError(<div foo="bar" />)
2222
expectType<JSX.Element>(<div key="foo" />)
2323
expectType<JSX.Element>(<div ref="bar" />)
2424

25+
// allow Ref type type on arbitrary element
26+
const fooRef = ref<HTMLElement>()
27+
expectType<JSX.Element>(<div ref={fooRef} />)
28+
expectType<JSX.Element>(<div ref={(el) => {fooRef.value = el as HTMLElement}} />)
29+
2530
expectType<JSX.Element>(
2631
<input
2732
onInput={e => {

types/vnode.d.ts

+11-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { Vue } from './vue'
22
import { DirectiveFunction, DirectiveOptions } from './options'
3+
import { Ref } from './v3-generated'
4+
import { ComponentPublicInstance } from './v3-component-public-instance'
35

46
/**
57
* For extending allowed non-declared props on components in TSX
@@ -65,11 +67,19 @@ export interface VNodeComponentOptions {
6567
tag?: string
6668
}
6769

70+
export type VNodeRef =
71+
| string
72+
| Ref
73+
| ((
74+
ref: Element | ComponentPublicInstance | null,
75+
refs: Record<string, any>
76+
) => void)
77+
6878
export interface VNodeData {
6979
key?: string | number
7080
slot?: string
7181
scopedSlots?: { [key: string]: ScopedSlot | undefined }
72-
ref?: string
82+
ref?: VNodeRef
7383
refInFor?: boolean
7484
tag?: string
7585
staticClass?: string

0 commit comments

Comments
 (0)