How to type emits in Vue with TypeScript
Monday, March 30, 2026
Typing emits in Vue with TypeScript ensures parent components pass the correct handler signatures, enables IDE autocompletion for event payload properties, and catches mismatched event names at compile time.
As the creator of CoreUI with Vue and TypeScript development experience since 2014, I type every custom event in CoreUI Vue components because it makes the component API self-documenting and prevents subtle bugs where a handler receives the wrong data shape.
The recommended approach in Vue 3 <script setup> uses the defineEmits<{...}>() TypeScript syntax with named tuples for each event’s payload.
This is more concise than the runtime object syntax and provides better type inference for the returned emit function.