feat(types): support typing directive value via generic argument (#1007)

close #998

diff --git a/packages/runtime-core/src/directives.ts b/packages/runtime-core/src/directives.ts
index 8626396efe99446e39a367214f1979765e1e87ea..478ca6bb46b6b4c2345a0f994f1d7450b8bb7241 100644 (file)
--- a/packages/runtime-core/src/directives.ts
+++ b/packages/runtime-core/src/directives.ts
@@ -19,18 +19,18 @@ import { currentRenderingInstance } from './componentRenderUtils'
 import { callWithAsyncErrorHandling, ErrorCodes } from './errorHandling'
 import { ComponentPublicInstance } from './componentProxy'
 
-export interface DirectiveBinding {
+export interface DirectiveBinding<V = any> {
   instance: ComponentPublicInstance | null
-  value: any
-  oldValue: any
+  value: V
+  oldValue: V | null
   arg?: string
   modifiers: DirectiveModifiers
-  dir: ObjectDirective
+  dir: ObjectDirective<any, V>
 }
 
-export type DirectiveHook<T = any, Prev = VNode<any, T> | null> = (
+export type DirectiveHook<T = any, Prev = VNode<any, T> | null, V = any> = (
   el: T,
-  binding: DirectiveBinding,
+  binding: DirectiveBinding<V>,
   vnode: VNode<any, T>,
   prevVNode: Prev
 ) => void
@@ -40,19 +40,21 @@ export type SSRDirectiveHook = (
   vnode: VNode
 ) => Data | undefined
 
-export interface ObjectDirective<T = any> {
-  beforeMount?: DirectiveHook<T, null>
-  mounted?: DirectiveHook<T, null>
-  beforeUpdate?: DirectiveHook<T, VNode<any, T>>
-  updated?: DirectiveHook<T, VNode<any, T>>
-  beforeUnmount?: DirectiveHook<T, null>
-  unmounted?: DirectiveHook<T, null>
+export interface ObjectDirective<T = any, V = any> {
+  beforeMount?: DirectiveHook<T, null, V>
+  mounted?: DirectiveHook<T, null, V>
+  beforeUpdate?: DirectiveHook<T, VNode<any, T>, V>
+  updated?: DirectiveHook<T, VNode<any, T>, V>
+  beforeUnmount?: DirectiveHook<T, null, V>
+  unmounted?: DirectiveHook<T, null, V>
   getSSRProps?: SSRDirectiveHook
 }
 
-export type FunctionDirective<T = any> = DirectiveHook<T>
+export type FunctionDirective<T = any, V = any> = DirectiveHook<T, any, V>
 
-export type Directive<T = any> = ObjectDirective<T> | FunctionDirective<T>
+export type Directive<T = any, V = any> =
+  | ObjectDirective<T, V>
+  | FunctionDirective<T, V>
 
 export type DirectiveModifiers = Record<string, boolean>