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

diff --git a/packages/dts-test/appDirective.test-d.ts b/packages/dts-test/appDirective.test-d.ts
new file mode 100644 (file)
index 0000000..0d7707a
--- /dev/null
+++ b/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)
+  }
+})

diff --git a/packages/runtime-core/src/apiCreateApp.ts b/packages/runtime-core/src/apiCreateApp.ts
index 8ba9429f447a55160bef533ff16f9d05a9475713..0afae35f0d1ce2e586b73b2cb6e1c9c83ed81c7f 100644 (file)
--- a/packages/runtime-core/src/apiCreateApp.ts
+++ b/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,

diff --git a/packages/runtime-core/src/compat/global.ts b/packages/runtime-core/src/compat/global.ts
index 0379bb67e8eddbbf7bfe21da34bab855b180c252..1e4d206eae3f361e87aa547f2fe84d646e7c8917 100644 (file)
--- a/packages/runtime-core/src/compat/global.ts
+++ b/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