fix(types): improve return type withKeys and withModifiers (#9734)

pikax · web-flow · commit 43c3cfdec5ae · 2023-12-04T07:59:01.000+08:00
diff --git a/packages/dts-test/defineComponent.test-d.tsx b/packages/dts-test/defineComponent.test-d.tsx
@@ -11,7 +11,9 @@ import {
   h,
   SlotsType,
   Slots,
-  VNode
+  VNode,
+  withKeys,
+  withModifiers
 } from 'vue'
 import { describe, expectType, IsUnion } from './utils'
 
@@ -1497,6 +1499,12 @@ describe('should work when props type is incompatible with setup returned type '
   expectType<SizeType>(CompA.$props.size)
 })
 
+describe('withKeys and withModifiers as pro', () => {
+  const onKeydown = withKeys(e => {}, [''])
+  const onClick = withModifiers(e => {}, [''])
+  ;<input onKeydown={onKeydown} onClick={onClick} />
+})
+
 import {
   DefineComponent,
   ComponentOptionsMixin,
diff --git a/packages/runtime-dom/src/directives/vOn.ts b/packages/runtime-dom/src/directives/vOn.ts
@@ -32,19 +32,21 @@ const modifierGuards: Record<
 /**
  * @private
  */
-export const withModifiers = (
-  fn: Function & { _withMods?: Function },
+export const withModifiers = <
+  T extends (event: Event, ...args: unknown[]) => any
+>(
+  fn: T & { _withMods?: T },
   modifiers: string[]
 ) => {
   return (
     fn._withMods ||
-    (fn._withMods = (event: Event, ...args: unknown[]) => {
+    (fn._withMods = ((event, ...args) => {
       for (let i = 0; i < modifiers.length; i++) {
         const guard = modifierGuards[modifiers[i]]
         if (guard && guard(event, modifiers)) return
       }
       return fn(event, ...args)
-    })
+    }) as T)
   )
 }
 
@@ -63,8 +65,8 @@ const keyNames: Record<string, string | string[]> = {
 /**
  * @private
  */
-export const withKeys = (
-  fn: Function & { _withKeys?: Function },
+export const withKeys = <T extends (event: KeyboardEvent) => any>(
+  fn: T & { _withKeys?: T },
   modifiers: string[]
 ) => {
   let globalKeyCodes: LegacyConfig['keyCodes']
@@ -88,7 +90,7 @@ export const withKeys = (
 
   return (
     fn._withKeys ||
-    (fn._withKeys = (event: KeyboardEvent) => {
+    (fn._withKeys = (event => {
       if (!('key' in event)) {
         return
       }
@@ -123,6 +125,6 @@ export const withKeys = (
           }
         }
       }
-    })
+    }) as T)
   )
 }

Original file line number	Diff line number	Diff line change
`@@ -32,19 +32,21 @@ const modifierGuards: Record<`
`32`	`32`	`/**`
`33`	`33`	`* @private`
`34`	`34`	`*/`
`35`		`-export const withModifiers = (`
`36`		`- fn: Function & { _withMods?: Function },`
	`35`	`+export const withModifiers = <`
	`36`	`+ T extends (event: Event, ...args: unknown[]) => any`
	`37`	`+>(`
	`38`	`+ fn: T & { _withMods?: T },`
`37`	`39`	`modifiers: string[]`
`38`	`40`	`) => {`
`39`	`41`	`return (`
`40`	`42`	`fn._withMods \|\|`
`41`		`- (fn._withMods = (event: Event, ...args: unknown[]) => {`
	`43`	`+ (fn._withMods = ((event, ...args) => {`
`42`	`44`	`for (let i = 0; i < modifiers.length; i++) {`
`43`	`45`	`const guard = modifierGuards[modifiers[i]]`
`44`	`46`	`if (guard && guard(event, modifiers)) return`
`45`	`47`	`}`
`46`	`48`	`return fn(event, ...args)`
`47`		`- })`
	`49`	`+ }) as T)`
`48`	`50`	`)`
`49`	`51`	`}`
`50`	`52`
`@@ -63,8 +65,8 @@ const keyNames: Record<string, string \| string[]> = {`
`63`	`65`	`/**`
`64`	`66`	`* @private`
`65`	`67`	`*/`
`66`		`-export const withKeys = (`
`67`		`- fn: Function & { _withKeys?: Function },`
	`68`	`+export const withKeys = <T extends (event: KeyboardEvent) => any>(`
	`69`	`+ fn: T & { _withKeys?: T },`
`68`	`70`	`modifiers: string[]`
`69`	`71`	`) => {`
`70`	`72`	`let globalKeyCodes: LegacyConfig['keyCodes']`
`@@ -88,7 +90,7 @@ export const withKeys = (`
`88`	`90`
`89`	`91`	`return (`
`90`	`92`	`fn._withKeys \|\|`
`91`		`- (fn._withKeys = (event: KeyboardEvent) => {`
	`93`	`+ (fn._withKeys = (event => {`
`92`	`94`	`if (!('key' in event)) {`
`93`	`95`	`return`
`94`	`96`	`}`
`@@ -123,6 +125,6 @@ export const withKeys = (`
`123`	`125`	`}`
`124`	`126`	`}`
`125`	`127`	`}`
`126`		`- })`
	`128`	`+ }) as T)`
`127`	`129`	`)`
`128`	`130`	`}`