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

Author: pikax

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'

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

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
 }

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 />)

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