Skip to content

defineEmits and references in the template - either misleading TS or bug. #13554

Open
@fgarit-te

Description

@fgarit-te

Vue version

3.5.14

Link to minimal reproduction

https://play.vuejs.org/#eNqlVE1v2zAM/SucUcApkDjo0l2yNOtW5LAB+8DWo4HFtWlHjSwZEuUkCPLfR8nLR4O1h/WUiCL53uOjvI0+Nk3SOozG0cTmRjQEFsk101SJutGG4E7XDZRG1xAnQ3/w6fH7VKWqdConoRU0Rii613daWS2xlyRJZip7CdtUAeRdNJG66sWrzOq4D/sMbrNL1WTYQTMoHwjrRmaEfAKYBPjbejOrBd2k0VOkNIIhp02GJzVRPyLLmKWokkerFSsLNNIo51ZCovneeNI2jcYdQX+XSalXX0KMjMP+Pp4vMF/+I/5o1z6WRj8MWjQtUzncEUtD6q5nv77hmv8fLmtdOE/8hcufyNqc59ilfXKqYNoneYHt5+CPUNW9na0Jld2L8kR95i7kpxH75af4nPQj3VFyHerYFJ7i3uvz1QCZqYqtIG7D8y6wFAq9PXYSevawRUVjiDvT2G1Lriw/jPmX3asux9BqUXjrpz2/AS/Z/2YwgKsEaCEsrLRZWhAlbLTjraprhgHtCOYnHOYwGBxLJ0I1nECbBpnxgyPyQ4U2k84H6g0cYre5FPmSgxcZkbGJVl8D/7BjMIDtNrTRJZwlwG7XYR5Q3/4lbP374QKpNROXYonA6XahnSyCGnjILBbAL4gW6NvzeHzBfN977vlBodGqmA7K/kPU82pOZJxIGD2ZuSfBh1w6tRRoXj3i4xfiZgoXyOi947bECxFfdjw7oPPn/btF45edF3OUvEuurqPdH1bklnw=

Context

Firstly thanks to the community and the maintainers, I really like vue.
I was replacing my type-unsafe $attrs.myEvent with typesafe events defined with defineEmits.

Steps to reproduce

<!-- parent -->
<script setup>
import Comp from './Comp.vue';

function printToConsole(...args) {
  console.log('waso', ...args);
}
</script>

<template>
  <Comp @myEmit="printToConsole" />
</template>

<-- Comp.vue -->
<script setup lang="ts">
defineEmits<{
  (event: 'myEmit', stuff?: string): void;
}>();
</script>

<template>
  <!-- 1. this works if you comment out `defineEmits` -->
  <!-- <input type="button" value="my button" @click="$attrs.onMyEmit" /> - {{ typeof $attrs.onMyEmit }} -->

  <!-- 2. this sort of looks like it should work based on the typing of `onMyEmit` but doesn't -->
  <input type="button" value="my button" @click="onMyEmit" /> - {{ typeof onMyEmit }}

  <!-- 3. this works but is clunkier -->
  <!-- <input type="button" value="my button" @click="(...args) => $emit('myEmit', 'hi')" />  -->
</template>

In Comp.vue above, the resolved types really make it look like I could access onMyEmit as a function
Image

What is expected?

One of two:

  1. Either the type onMyEmit isn't reported in the template
  2. or onMyEmit is indeed defined.

What is actually happening?

At runtime onMyEmit doesn't exist.

System Info

https://play.vuejs.org/#eNqlVE1v2zAM/SucUcApkDjo0l2yNOtW5LAB+8DWo4HFtWlHjSwZEuUkCPLfR8nLR4O1h/WUiCL53uOjvI0+Nk3SOozG0cTmRjQEFsk101SJutGG4E7XDZRG1xAnQ3/w6fH7VKWqdConoRU0Rii613daWS2xlyRJZip7CdtUAeRdNJG66sWrzOq4D/sMbrNL1WTYQTMoHwjrRmaEfAKYBPjbejOrBd2k0VOkNIIhp02GJzVRPyLLmKWokkerFSsLNNIo51ZCovneeNI2jcYdQX+XSalXX0KMjMP+Pp4vMF/+I/5o1z6WRj8MWjQtUzncEUtD6q5nv77hmv8fLmtdOE/8hcufyNqc59ilfXKqYNoneYHt5+CPUNW9na0Jld2L8kR95i7kpxH75af4nPQj3VFyHerYFJ7i3uvz1QCZqYqtIG7D8y6wFAq9PXYSevawRUVjiDvT2G1Lriw/jPmX3asux9BqUXjrpz2/AS/Z/2YwgKsEaCEsrLRZWhAlbLTjraprhgHtCOYnHOYwGBxLJ0I1nECbBpnxgyPyQ4U2k84H6g0cYre5FPmSgxcZkbGJVl8D/7BjMIDtNrTRJZwlwG7XYR5Q3/4lbP374QKpNROXYonA6XahnSyCGnjILBbAL4gW6NvzeHzBfN977vlBodGqmA7K/kPU82pOZJxIGD2ZuSfBh1w6tRRoXj3i4xfiZgoXyOi947bECxFfdjw7oPPn/btF45edF3OUvEuurqPdH1bklnw=

TS: 5.8.3, I am not sure what version of vue-tsc the vue playground is using.

Any additional comments?

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions