fix(types): support Ref and function types in tsx ref attribute (#12759)

fix #12758
vuejs · Oct 11, 2022 · 87f69aa · 87f69aa
1 parent 5d26f81
commit 87f69aa
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/types/test/v3/tsx-test.tsx b/types/test/v3/tsx-test.tsx
@@ -1,4 +1,4 @@
-import { VNode, defineComponent } from '../../index'
+import { VNode, defineComponent, ref } from '../../index'
 import { expectType } from '../utils'
 
 expectType<VNode>(<div />)
@@ -22,6 +22,11 @@ expectError(<div foo="bar" />)
 expectType<JSX.Element>(<div key="foo" />)
 expectType<JSX.Element>(<div ref="bar" />)
 
+// allow Ref type type on arbitrary element
+const fooRef = ref<HTMLElement>()
+expectType<JSX.Element>(<div ref={fooRef} />)
+expectType<JSX.Element>(<div ref={(el) => {fooRef.value = el as HTMLElement}} />)
+
 expectType<JSX.Element>(
   <input
     onInput={e => {

diff --git a/types/vnode.d.ts b/types/vnode.d.ts
@@ -1,5 +1,7 @@
 import { Vue } from './vue'
 import { DirectiveFunction, DirectiveOptions } from './options'
+import { Ref } from './v3-generated'
+import { ComponentPublicInstance } from './v3-component-public-instance'
 
 /**
  * For extending allowed non-declared props on components in TSX
@@ -65,11 +67,19 @@ export interface VNodeComponentOptions {
   tag?: string
 }
 
+export type VNodeRef =
+  | string
+  | Ref
+  | ((
+      ref: Element | ComponentPublicInstance | null,
+      refs: Record<string, any>
+    ) => void)
+
 export interface VNodeData {
   key?: string | number
   slot?: string
   scopedSlots?: { [key: string]: ScopedSlot | undefined }
-  ref?: string
+  ref?: VNodeRef
   refInFor?: boolean
   tag?: string
   staticClass?: string