fix(types): fix typescript error when spreading `$props`(#5968)

diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index 6e85afe4db5c8f0b4e6c3a7139cf03740b06eaff..12a2dee2773d909a5d0ab6866964e930c72f3731 100644 (file)
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -86,7 +86,7 @@ export { h } from './h'
 // Advanced render function utilities
 export { createVNode, cloneVNode, mergeProps, isVNode } from './vnode'
 // VNode types
-export { Fragment, Text, Comment, Static } from './vnode'
+export { Fragment, Text, Comment, Static, VNodeRef } from './vnode'
 // Built-in components
 export { Teleport, TeleportProps } from './components/Teleport'
 export { Suspense, SuspenseProps } from './components/Suspense'

diff --git a/packages/runtime-core/src/vnode.ts b/packages/runtime-core/src/vnode.ts
index 0a2543a70e7e74a07fc371b3652d57e4f8c17a27..b2c52ac7e2e141facaec2b828c39fd2341181786 100644 (file)
--- a/packages/runtime-core/src/vnode.ts
+++ b/packages/runtime-core/src/vnode.ts
@@ -43,6 +43,7 @@ import { convertLegacyComponent } from './compat/component'
 import { convertLegacyVModelProps } from './compat/componentVModel'
 import { defineLegacyVNodeProperties } from './compat/renderFn'
 import { callWithAsyncErrorHandling, ErrorCodes } from './errorHandling'
+import { ComponentPublicInstance } from './componentPublicInstance'
 
 export const Fragment = Symbol(__DEV__ ? 'Fragment' : undefined) as any as {
   __isFragment: true
@@ -68,7 +69,10 @@ export type VNodeTypes =
 export type VNodeRef =
   | string
   | Ref
-  | ((ref: object | null, refs: Record<string, any>) => void)
+  | ((
+      ref: Element | ComponentPublicInstance | null,
+      refs: Record<string, any>
+    ) => void)
 
 export type VNodeNormalizedRefAtom = {
   i: ComponentInternalInstance

diff --git a/packages/runtime-dom/types/jsx.d.ts b/packages/runtime-dom/types/jsx.d.ts
index 38a7b5e77fd1bc65eca5e464f15865429d49fd7e..6120f77715adf19d3df8f5e1959bf0e0c9137948 100644 (file)
--- a/packages/runtime-dom/types/jsx.d.ts
+++ b/packages/runtime-dom/types/jsx.d.ts
@@ -40,7 +40,6 @@ export interface CSSProperties
    * For examples and more information, visit:
    * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors
    */
-      
   [v: `--${string}`]: string | number | undefined
 }
 
@@ -1311,10 +1310,7 @@ import * as RuntimeCore from '@vue/runtime-core'
 
 type ReservedProps = {
   key?: string | number | symbol
-  ref?:
-    | string
-    | RuntimeCore.Ref
-    | ((ref: Element | RuntimeCore.ComponentPublicInstance | null) => void)
+  ref?: RuntimeCore.VNodeRef
   ref_for?: boolean
   ref_key?: string
 }

diff --git a/test-dts/componentTypeExtensions.test-d.tsx b/test-dts/componentTypeExtensions.test-d.tsx
index 32a72f844e6b0a3aba6d5cbdad37d097019657ac..3ff5b7addb0d213c484b75afa916e80a3d2bfe70 100644 (file)
--- a/test-dts/componentTypeExtensions.test-d.tsx
+++ b/test-dts/componentTypeExtensions.test-d.tsx
@@ -44,6 +44,7 @@ export const Custom = defineComponent({
 expectType<JSX.Element>(<Custom baz={1} />)
 expectType<JSX.Element>(<Custom custom={1} baz={1} />)
 expectType<JSX.Element>(<Custom bar="bar" baz={1} />)
+expectType<JSX.Element>(<Custom ref={''} bar="bar" baz={1} />)
 
 // @ts-expect-error
 expectType<JSX.Element>(<Custom />)

diff --git a/test-dts/defineComponent.test-d.tsx b/test-dts/defineComponent.test-d.tsx
index 30d25436201a09adb55a2836166aa4ef0a2b1baa..f5941b4341e76393b1051132bc216c910acf3c22 100644 (file)
--- a/test-dts/defineComponent.test-d.tsx
+++ b/test-dts/defineComponent.test-d.tsx
@@ -1144,6 +1144,25 @@ describe('DefineComponent should infer correct types when assigning to Component
   expectType<Component>(component)
 })
 
+// #5969
+describe('should allow to assign props', () => {
+  const Child = defineComponent({
+    props: {
+      bar: String
+    }
+  })
+
+  const Parent = defineComponent({
+    props: {
+      ...Child.props,
+      foo: String
+    }
+  })
+
+  const child = new Child()
+  expectType<JSX.Element>(<Parent {...child.$props} />)
+})
+
 // check if defineComponent can be exported
 export default {
   // function components