feat(types): support passing generics when registering global directives (#9660)

Author: mitjans

packages/dts-test/appDirective.test-d.ts

@@ -0,0 +1,14 @@
+import { createApp } from 'vue'
+import { expectType } from './utils'
+
+const app = createApp({})
+
+app.directive<HTMLElement, string>('custom', {
+  mounted(el, binding) {
+    expectType<HTMLElement>(el)
+    expectType<string>(binding.value)
+
+    // @ts-expect-error not any
+    expectType<number>(binding.value)
+  }
+})

packages/runtime-core/src/apiCreateApp.ts

@@ -42,8 +42,8 @@ export interface App<HostElement = any> {
   mixin(mixin: ComponentOptions): this
   component(name: string): Component | undefined
   component(name: string, component: Component | DefineComponent): this
-  directive(name: string): Directive | undefined
-  directive(name: string, directive: Directive): this
+  directive<T = any, V = any>(name: string): Directive<T, V> | undefined
+  directive<T = any, V = any>(name: string, directive: Directive<T, V>): this
   mount(
     rootContainer: HostElement | string,
     isHydrate?: boolean,

packages/runtime-core/src/compat/global.ts

@@ -82,8 +82,11 @@ export type CompatVue = Pick<App, 'version' | 'component' | 'directive'> & {
 
   component(name: string): Component | undefined
   component(name: string, component: Component): CompatVue
-  directive(name: string): Directive | undefined
-  directive(name: string, directive: Directive): CompatVue
+  directive<T = any, V = any>(name: string): Directive<T, V> | undefined
+  directive<T = any, V = any>(
+    name: string,
+    directive: Directive<T, V>
+  ): CompatVue
 
   compile(template: string): RenderFunction