Skip to content
Advertisement

Vue 3 defineEmits breaks defineProps types

I’m using Vue 3 and TS 4.4. I’ve got a component that defines its prop types with defineProps. When I add a call to defineEmits, VS Code starts telling me my props variable doesn’t exist in the component template. Here’s the source code:

JavaScript

And a couple of screenshots to better show what I’m seeing in VS Code. This is after adding defineEmits:

VS Code TS error

And this is without defineEmits:

VS Code without TS error

What is the correct way to define types for both props and emits?

Advertisement

Answer

The defineEmits<T>() generic argument is essentially a TypeScript interface that defines only functions, which receive a specific event name and optional arguments:

JavaScript

Examples:

JavaScript
JavaScript
JavaScript

For your update:checked event, the code should look similar to the following:

JavaScript
JavaScript
JavaScript
User contributions licensed under: CC BY-SA
6 People found this is helpful
Advertisement