Skip to content

Commit a625376

Browse files
feat(types): improve event type inference when using h with native elements (#9756)
1 parent a41409e commit a625376

File tree

2 files changed

+29
-1
lines changed

2 files changed

+29
-1
lines changed

packages/dts-test/h.test-d.ts

+12-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
Component,
1010
resolveComponent
1111
} from 'vue'
12-
import { describe, expectAssignable } from './utils'
12+
import { describe, expectAssignable, expectType } from './utils'
1313

1414
describe('h inference w/ element', () => {
1515
// key
@@ -32,6 +32,17 @@ describe('h inference w/ element', () => {
3232
// slots
3333
const slots = { default: () => {} } // RawSlots
3434
h('div', {}, slots)
35+
// events
36+
h('div', {
37+
onClick: e => {
38+
expectType<MouseEvent>(e)
39+
}
40+
})
41+
h('input', {
42+
onFocus(e) {
43+
expectType<FocusEvent>(e)
44+
}
45+
})
3546
})
3647

3748
describe('h inference w/ Fragment', () => {

packages/runtime-core/src/h.ts

+17
Original file line numberDiff line numberDiff line change
@@ -75,10 +75,27 @@ interface Constructor<P = any> {
7575
new (...args: any[]): { $props: P }
7676
}
7777

78+
type HTMLElementEventHandler = {
79+
[K in keyof HTMLElementEventMap as `on${Capitalize<K>}`]?: (
80+
ev: HTMLElementEventMap[K]
81+
) => any
82+
}
83+
7884
// The following is a series of overloads for providing props validation of
7985
// manually written render functions.
8086

8187
// element
88+
export function h<K extends keyof HTMLElementTagNameMap>(
89+
type: K,
90+
children?: RawChildren
91+
): VNode
92+
export function h<K extends keyof HTMLElementTagNameMap>(
93+
type: K,
94+
props?: (RawProps & HTMLElementEventHandler) | null,
95+
children?: RawChildren | RawSlots
96+
): VNode
97+
98+
// custom element
8299
export function h(type: string, children?: RawChildren): VNode
83100
export function h(
84101
type: string,

0 commit comments

Comments
 (0)