Subscribe on changes!

Vue: Type  (value: string) => void  is not assignable to type  ($event?: undefined) => any  Types of parameters value and  $event  are incompatible.

avatar
Nov 20th 2023

Vue version

3.3.8

Link to minimal reproduction

https://play.vuejs.org/#eNqdU02L2zAQ/StTUbADIT7sLXXCtkug7aFd2kIvurj22NGuLBlJdgMh/70jyR/ZEvawPnn0nmbem9Gc2ceu2ww9si3LbWlE58Ci67s9V6LttHFwBoM1XKA2uoWEqMkMPRYGlRuRTRZDny35wBVXpVbWQWsb2PkcafIZpdTwWxtZvUtWXOVZLEnFKHDYdrJwSBFAHpNlFOTZjLA1c5bS1qLZPFmtSPXZszkrddsJieZ75wSV5WwLAfFYQVX/fg1nzvS4ns7LI5bPN86f7MmfcfZo0KIZkLMZc4Vp0EX48PMbnuh/Bltd9ZLYr4A/0GrZe42R9qlXFcm+4gW1X0KDhWp+2cPJobKTKS/UMy+Bzxk1++EV64vcu81duMfVhbq4jMoP/kXnqfcPRyErgHsciLTjLB0K2eMWrDMkaQWw28Ox8MIPnhHhFWf/TStM9fpRgSxUQ/kciVweWKw2PaIQLW+o7lXpbd2oN7ksyPusQZHB+VmR0TndLZ9/eucoNdyXUpTPJOw9tsKlSfCdrGHyNfL9F6+M97MYvcn1mTZiXKowRc6udsbLoKWpsBYKDxTYfDSb0hhe6pvHsoVBi4o6sE+pD1OqwJkWMFmFIkuDLv8AoERYKA==

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

avatar
Nov 21st 2023

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) {
                     ~~~~~
Bildschirmfoto 2023-11-21 um 08 14 11

Seems like a problem with your IDE?

avatar
Nov 21st 2023

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

avatar
Nov 21st 2023

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.

avatar
Nov 25th 2023

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

avatar
Nov 25th 2023
avatar
Nov 28th 2023

@zangetsu02 please provide a reproduction, the playground you added as reproduction is working as intended.

I'll close this, please reopen or create a new issue when you have reproduction code.