fix(types): widen directive arg type from string to any (#13758)

czhlin · web-flow · commit 4b7170625d0b · 2025-09-24T17:12:25.000+08:00
closes #13757
diff --git a/packages-private/dts-test/directives.test-d.ts b/packages-private/dts-test/directives.test-d.ts
@@ -13,7 +13,7 @@ type ExtractBinding<T> = T extends (
 declare function testDirective<
   Value,
   Modifiers extends string = string,
-  Arg extends string = string,
+  Arg = any,
 >(): ExtractBinding<Directive<any, Value, Modifiers, Arg>>
 
 describe('vmodel', () => {
@@ -44,15 +44,37 @@ describe('custom', () => {
     value: number
     oldValue: number | null
     arg?: 'Arg'
-    modifiers: Record<'a' | 'b', boolean>
+    modifiers: Partial<Record<'a' | 'b', boolean>>
     // @ts-expect-error
   }>(testDirective<number, 'a' | 'b', 'Argx'>())
 
   expectType<{
     value: number
     oldValue: number | null
     arg?: 'Arg'
-    modifiers: Record<'a' | 'b', boolean>
+    modifiers: Partial<Record<'a' | 'b', boolean>>
     // @ts-expect-error
   }>(testDirective<string, 'a' | 'b', 'Arg'>())
+
+  expectType<{
+    value: number
+    oldValue: number | null
+    arg?: HTMLElement
+    modifiers: Partial<Record<'a' | 'b', boolean>>
+  }>(testDirective<number, 'a' | 'b', HTMLElement>())
+
+  expectType<{
+    value: number
+    oldValue: number | null
+    arg?: HTMLElement
+    modifiers: Partial<Record<'a' | 'b', boolean>>
+    // @ts-expect-error
+  }>(testDirective<number, 'a' | 'b', string>())
+
+  expectType<{
+    value: number
+    oldValue: number | null
+    arg?: HTMLElement
+    modifiers: Partial<Record<'a' | 'b', boolean>>
+  }>(testDirective<number, 'a' | 'b'>())
 })
diff --git a/packages/runtime-core/src/apiCreateApp.ts b/packages/runtime-core/src/apiCreateApp.ts
@@ -50,15 +50,15 @@ export interface App<HostElement = any> {
     HostElement = any,
     Value = any,
     Modifiers extends string = string,
-    Arg extends string = string,
+    Arg = any,
   >(
     name: string,
   ): Directive<HostElement, Value, Modifiers, Arg> | undefined
   directive<
     HostElement = any,
     Value = any,
     Modifiers extends string = string,
-    Arg extends string = string,
+    Arg = any,
   >(
     name: string,
     directive: Directive<HostElement, Value, Modifiers, Arg>,
diff --git a/packages/runtime-core/src/directives.ts b/packages/runtime-core/src/directives.ts
@@ -28,22 +28,22 @@ import { pauseTracking, resetTracking, traverse } from '@vue/reactivity'
 export interface DirectiveBinding<
   Value = any,
   Modifiers extends string = string,
-  Arg extends string = string,
+  Arg = any,
 > {
   instance: ComponentPublicInstance | Record<string, any> | null
   value: Value
   oldValue: Value | null
   arg?: Arg
   modifiers: DirectiveModifiers<Modifiers>
-  dir: ObjectDirective<any, Value>
+  dir: ObjectDirective<any, Value, Modifiers, Arg>
 }
 
 export type DirectiveHook<
   HostElement = any,
   Prev = VNode<any, HostElement> | null,
   Value = any,
   Modifiers extends string = string,
-  Arg extends string = string,
+  Arg = any,
 > = (
   el: HostElement,
   binding: DirectiveBinding<Value, Modifiers, Arg>,
@@ -54,7 +54,7 @@ export type DirectiveHook<
 export type SSRDirectiveHook<
   Value = any,
   Modifiers extends string = string,
-  Arg extends string = string,
+  Arg = any,
 > = (
   binding: DirectiveBinding<Value, Modifiers, Arg>,
   vnode: VNode,
@@ -64,7 +64,7 @@ export interface ObjectDirective<
   HostElement = any,
   Value = any,
   Modifiers extends string = string,
-  Arg extends string = string,
+  Arg = any,
 > {
   /**
    * @internal without this, ts-expect-error in directives.test-d.ts somehow
@@ -99,14 +99,14 @@ export type FunctionDirective<
   HostElement = any,
   V = any,
   Modifiers extends string = string,
-  Arg extends string = string,
+  Arg = any,
 > = DirectiveHook<HostElement, any, V, Modifiers, Arg>
 
 export type Directive<
   HostElement = any,
   Value = any,
   Modifiers extends string = string,
-  Arg extends string = string,
+  Arg = any,
 > =
   | ObjectDirective<HostElement, Value, Modifiers, Arg>
   | FunctionDirective<HostElement, Value, Modifiers, Arg>
@@ -125,8 +125,8 @@ export function validateDirectiveName(name: string): void {
 export type DirectiveArguments = Array<
   | [Directive | undefined]
   | [Directive | undefined, any]
-  | [Directive | undefined, any, string]
-  | [Directive | undefined, any, string | undefined, DirectiveModifiers]
+  | [Directive | undefined, any, any]
+  | [Directive | undefined, any, any, DirectiveModifiers]
 >
 
 /**
