fix(types): propagate type parameter constraints for TypeScript 4.8 (#6351)

* fix(types): propagate type parameter constraints for TypeScript 4.8

* fix: add more constraints

---------

Co-authored-by: 三咲智子 Kevin Deng <[email protected]>

Author: DanielRosenwasser

packages/runtime-core/src/apiCreateApp.ts

@@ -16,7 +16,7 @@ import {
   ComponentPublicInstance
 } from './componentPublicInstance'
 import { Directive, validateDirectiveName } from './directives'
-import { RootRenderFunction } from './renderer'
+import { RendererElement, RootRenderFunction } from './renderer'
 import { InjectionKey } from './apiInject'
 import { warn } from './warning'
 import { createVNode, cloneVNode, VNode } from './vnode'
@@ -196,7 +196,7 @@ export type CreateAppFunction<HostElement> = (
 
 let uid = 0
 
-export function createAppAPI<HostElement>(
+export function createAppAPI<HostElement extends RendererElement>(
   render: RootRenderFunction<HostElement>,
   hydrate?: RootHydrateFunction
 ): CreateAppFunction<HostElement> {

packages/runtime-core/src/directives.ts

@@ -21,6 +21,7 @@ import { ComponentPublicInstance } from './componentPublicInstance'
 import { mapCompatDirectiveHook } from './compat/customDirective'
 import { pauseTracking, resetTracking } from '@vue/reactivity'
 import { traverse } from './apiWatch'
+import { RendererElement } from './renderer'
 
 export interface DirectiveBinding<V = any> {
   instance: ComponentPublicInstance | null
@@ -31,7 +32,11 @@ export interface DirectiveBinding<V = any> {
   dir: ObjectDirective<any, V>
 }
 
-export type DirectiveHook<T = any, Prev = VNode<any, T> | null, V = any> = (
+export type DirectiveHook<
+  T extends RendererElement = any,
+  Prev = VNode<any, T> | null,
+  V = any
+> = (
   el: T,
   binding: DirectiveBinding<V>,
   vnode: VNode<any, T>,
@@ -43,7 +48,7 @@ export type SSRDirectiveHook = (
   vnode: VNode
 ) => Data | undefined
 
-export interface ObjectDirective<T = any, V = any> {
+export interface ObjectDirective<T extends RendererElement = any, V = any> {
   created?: DirectiveHook<T, null, V>
   beforeMount?: DirectiveHook<T, null, V>
   mounted?: DirectiveHook<T, null, V>
@@ -55,9 +60,12 @@ export interface ObjectDirective<T = any, V = any> {
   deep?: boolean
 }
 
-export type FunctionDirective<T = any, V = any> = DirectiveHook<T, any, V>
+export type FunctionDirective<
+  T extends RendererElement = any,
+  V = any
+> = DirectiveHook<T, any, V>
 
-export type Directive<T = any, V = any> =
+export type Directive<T extends RendererElement = any, V = any> =
   | ObjectDirective<T, V>
   | FunctionDirective<T, V>
 

packages/runtime-core/src/renderer.ts

@@ -90,7 +90,7 @@ export type RootRenderFunction<HostElement = RendererElement> = (
 
 export interface RendererOptions<
   HostNode = RendererNode,
-  HostElement = RendererElement
+  HostElement extends RendererElement = RendererElement
 > {
   patchProp(
     el: HostElement,
@@ -145,7 +145,7 @@ export interface RendererElement extends RendererNode {}
 // to optimize bundle size.
 export interface RendererInternals<
   HostNode = RendererNode,
-  HostElement = RendererElement
+  HostElement extends RendererElement = RendererElement
 > {
   p: PatchFn
   um: UnmountFn
@@ -295,7 +295,7 @@ export const queuePostRenderEffect = __FEATURE_SUSPENSE__
  */
 export function createRenderer<
   HostNode = RendererNode,
-  HostElement = RendererElement
+  HostElement extends RendererElement = RendererElement
 >(options: RendererOptions<HostNode, HostElement>) {
   return baseCreateRenderer<HostNode, HostElement>(options)
 }
@@ -312,7 +312,7 @@ export function createHydrationRenderer(
 // overload 1: no hydration
 function baseCreateRenderer<
   HostNode = RendererNode,
-  HostElement = RendererElement
+  HostElement extends RendererElement = RendererElement
 >(options: RendererOptions<HostNode, HostElement>): Renderer<HostElement>
 
 // overload 2: with hydration

packages/runtime-core/src/vnode.ts

@@ -133,7 +133,7 @@ export type VNodeNormalizedChildren =
 
 export interface VNode<
   HostNode = RendererNode,
-  HostElement = RendererElement,
+  HostElement extends RendererElement = RendererElement,
   ExtraProps = { [key: string]: any }
 > {
   /**
@@ -613,7 +613,7 @@ export function guardReactiveProps(props: (Data & VNodeProps) | null) {
     : props
 }
 
-export function cloneVNode<T, U>(
+export function cloneVNode<T extends RendererNode, U extends RendererElement>(
   vnode: VNode<T, U>,
   extraProps?: (Data & VNodeProps) | null,
   mergeRef = false