types: improve app.directive type generics (#11926)

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

@@ -3,12 +3,17 @@ import { expectType } from './utils'
 
 const app = createApp({})
 
-app.directive<HTMLElement, string>('custom', {
+app.directive<HTMLElement, string, 'prevent' | 'stop', 'arg1' | 'arg2'>(
-  mounted(el, binding) {
+  'custom',
-    expectType<HTMLElement>(el)
+  {
-    expectType<string>(binding.value)
+    mounted(el, binding) {
+      expectType<HTMLElement>(el)
+      expectType<string>(binding.value)
+      expectType<{ prevent: boolean; stop: boolean }>(binding.modifiers)
+      expectType<'arg1' | 'arg2'>(binding.arg!)
 
-    // @ts-expect-error not any
+      // @ts-expect-error not any
-    expectType<number>(binding.value)
+      expectType<number>(binding.value)
+    },
   },
-})
+)

packages/runtime-core/src/apiCreateApp.ts

@@ -46,8 +46,23 @@ export interface App<HostElement = any> {
     name: string,
     component: T,
   ): this
-  directive<T = any, V = any>(name: string): Directive<T, V> | undefined
+  directive<
-  directive<T = any, V = any>(name: string, directive: Directive<T, V>): this
+    HostElement = any,
+    Value = any,
+    Modifiers extends string = string,
+    Arg extends string = string,
+  >(
+    name: string,
+  ): Directive<HostElement, Value, Modifiers, Arg> | undefined
+  directive<
+    HostElement = any,
+    Value = any,
+    Modifiers extends string = string,
+    Arg extends string = string,
+  >(
+    name: string,
+    directive: Directive<HostElement, Value, Modifiers, Arg>,
+  ): this
   mount(
     rootContainer: HostElement | string,
     /**