Vue: Type (value: string) => void is not assignable to type ($event?: undefined) => any Types of parameters value and $event are incompatible.
Vue version
3.3.8
Link to minimal reproduction
Steps to reproduce
package.json
{
"name": "utils",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.3.4"
},
"devDependencies": {
"@types/node": "^20.5.7",
"@vitejs/plugin-vue": "^4.2.3",
"typescript": "^5.0.2",
"vite": "^4.4.5",
"vue-tsc": "^1.8.5"
}
}
vite.config
import { defineConfig } from 'vite'
import { resolve } from 'path'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [ vue()],
build: {
lib: {
entry: resolve(__dirname, 'src/index.ts'),
name: 'vueCombo',
fileName: 'vue-combo',
},
rollupOptions: {
// make sure to externalize deps that shouldn't be bundled
// into your library
external: ['vue'],
output: {
// Provide global variables to use in the UMD build
// for externalized deps
globals: {
vue: 'Vue',
},
},
},
},
})
Example of the issue
Child Component
<template>
<button @click="$emit('event', value)">
button
</button>
</template>
<script setup lang="ts">
import {ref,} from "vue";
const emit = defineEmits<{
(e: 'event', value: string): void
}>()
const value = ref('')
<script/>
Parent Component
<template>
<Child @event="(value: string) => handleEvent(value)"/>
</template>
<script setup lang="ts">
// import child
function handleEvent(value) {
alert(value)
}
<script/>
What is expected?
its expected the typing of the emit to work as intented
What is actually happening?
On the ParentComponent, i get this error on the emit of the child
Vue: Type (value: string) => void is not assignable to type ($event?: undefined) => any Types of parameters value and $event are incompatible.
System Info
No response
Any additional comments?
No response
Works fine in the playground that you linked and my VSCode editor. The only thing TS is complaining about is the implicit any
in the handleEvent
function's value
parameter:
src/components/Parent.vue:8:22 - error TS7006: Parameter 'value' implicitly has an 'any' type. function handleEvent(value) { ~~~~~
Seems like a problem with your IDE?
Hello, I've tried vscode and phpstorm, in both I get the error.
I know that works fine in the playground, i only linked that for reference to see how i implemented the logic.
The problem that I can't understand is, in the ParentComponent, why typescript is telling me that the type of the parameter of the arrow function is not assignable to '$event?: undefined'. In every vue project I use that logic when listening to child-emit.
I've already tried to upgrade my dependencies but nothing
I copied your code snippets from the playground into a fresh npm create vue@latest
app, and took the above screenshot in VSCode. So the code your provided to us in this issue is fine and works.
I don't know how to help you without a reproduction that actually demonstrates the problem.
I have created 2 project with vite, in 2 differents computer, one with vscode and one with phpstorm. In both i get this error, i dont know which info i can give you, i said everything. If you want there is the repo "vue-select-element" in my profile, and the component that is giving me this error is the BaseCombobox
There's no component with that name in your repo.
https://github.com/search?q=repo%3Azangetsu02%2Fvue-select-element%20BaseCombobox&type=code