Recently, I encountered a run-time error in a Vue / Typescript application due to the lack of typing for custom events.
For example, the following code compiles without any issues but fails at run-time:
// Within component A
public foo() {
this.$emit("connect", { username: this.username, password: this.password });
}
// Component B
<template>
... <ComponentA @connect="onConnect"> ...
</template>
<script lang="ts"&quo;
...
public onConnect(username: string, password: string) {
...
Is there a way to avoid such errors during compile time? I am looking for a solution where the emitter and receiver types are linked, so I can catch any mismatches at compile time rather than at run-time.
Edit: I am not seeking a fix for the above error.
Edit: Just to clarify, the main issue is the mismatch between the type passed to emit and the type expected by the callback, which is not caught during compile time.