When using Vue 3 with Typescript, encountering the error message "No overload matches this call" can be frustrating even when the function name is clearly defined. It appears that the order of

While working with Vue 3 emit function and TypeScript, I encountered a strange error message. Here's an example code snippet to reproduce the issue:

export default defineComponent({
  emits: {
    emit1: (payload: number) => payload,
    emit2: (payload: string) => payload
  },
  methods: {
   ...
  }
}

When I call the emit1 as follows, it compiles without errors:

this.$emit("emit1", 1);

However, if I try the following, a weird error occurs:

this.$emit("emit1", "test");

TS2769: No overload matches this call.
  The last overload gave the following error.
    Argument of type '"emit1"' is not assignable to parameter of type '"emit2"'.

Switching the order of emit functions leads to a different error that seems more sensical:

export default defineComponent({
  emits: {
    emit2: (payload: string) => payload,
    emit1: (payload: number) => payload
  },
  methods: {
   ...
  }
}

This error highlights that there is a mismatch between boolean and number types.

My Questions:

  • Why does changing the order of the functions impact the error message?
  • Is there a way to fix this inconsistency in Vue or is it possibly an issue with TypeScript itself?

Answer №1

When utilizing the most recent version of Vue CLI, the complete error message is displayed regardless of the order in which emit is used. Even when rearranging the emits, both error messages are still shown, just in reverse:

TS2769: No overload matches this call.
  Overload 1 of 2, '(event: "emit1", payload: number): void', encountered an error.
    Argument of type '"test"' is not compatible with parameter of type 'number'.

  Overload 2 of 2, '(event: "emit2", payload: string): void', encountered an error.
    Argument of type '"emit1"' is not compatible with parameter of type '"emit2"'. 

This clearly explains the issue at hand, although it was initially confusing as only one message was visible:

  • Vue conducts a test for emit against all potentially matching emits entries (i.e., the overloads). The name and value of the emit used in the method are passed as parameters to the testing function. This is why you see event and payload being passed as arguments.

  • In one scenario, the event parameter finds a match but there is a type error with the value parameter. In the other scenario, there is no match found for the event.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to generate a list in Vue.js using an array

I am facing an unusual issue while trying to create a list using Vuejs. Here is the structure of my array: const sr = new Vue({ el: '#singlerecipe-app', data: { checkeditems: [], }, }); This array is initialized in my HTML as follows: ...

Revamp Your Service Naming and Nickname with Swagger Codegen IO

Is it possible to customize the Swagger IO CodeGen naming conventions for generating Angular API Service Proxies? Check out Swagger Editor here The current convention combines API, Controller Name, Controller Method, and HTTP Action. public apiProductGet ...

Utilizing class-transformer to reveal an array of objects

I am facing an issue with exposing an array of objects in my code. Even though I have exposed the Followers array in the UserDto, it is not getting displayed as expected. This is the output I am currently seeing, { "id": "5ff4ec30-d3f4- ...

Enhancing the getDate function in JavaScript with additional days

My function for selecting the date is working perfectly: formatDateField(event: Date, formControl: string) { this.form .get(formControl) .patchValue( this.datePipe.transform(event.getTime(), "yyyy-MM-dd'T'HH:mm:ss&quo ...

I'm puzzled as to why a div tag suddenly becomes invisible when I attempt to link it with a v-for directive in my code

I am facing an issue with the div tag assigned to the log class. My objective is to populate the text using data retrieved from the API response. However, when I attempt to include the v-for directive, the entire div mysteriously disappears from the brow ...

Binding variables in JSX with Vue.js scope involves connecting data directly to the template

I am in search of code similar to this: <div v-for="item in items" :key="item"> {{ item }} ... <div v-with:newValue="calculateValue(item)"> {{ newValue }} </div> </div> I'm not sure what to call this pattern, but ...

The Vue framework has been designated as an external dependency within the single-spa configuration, but an issue has arisen

Currently utilizing Vue with single-spa, I have embarked on a mission to minimize the bundle size. In pursuit of this goal, my initial approach involved configuring Vue as an external dependency in the webpack.config.js file for each Micro Front-end: exte ...

Issue with PixiJS: Clicking on a line is disabled after changing its position

Trying to create clickable lines between nodes using Pixi has been a bit of a challenge for me. To ensure the line is clickable, I've extended it in an object that incorporates Container. The process involves finding the angle of the line given two p ...

Combining Multiple ReactJS Elements in a Single DIV using TypeScript (TSX)

Looking at the code snippet provided, I am attempting to display three elements or components within the same container. I have experimented with utilizing the Render function for each element, however it appears that the last component replaces the first ...

How can I showcase the name of a Typescript enum in an Aurelia binding?

Let's simplify things (assuming all includes and imports are correctly referenced). Imagine you have a bindable variable of type Color on your view model (file.ts): @bindable color: Color = Color.Green; ... and now you want to display it on the vie ...

Ensure that the click event on the HTML element is only triggered one time

In my application, I have the following code snippet. The issue is that this code resides in each table column header. Therefore, whenever I click on a mat-select option, new values are generated and used in an *ngFor loop for mat-option. The problem aris ...

Issue encountered while trying to upload an image with Angular Material framework

I'm a beginner with angular material and I'm struggling to get any image I upload to take the position of my avatar image. Firstly, the avatar image isn't showing up at all and secondly, when I try to upload an image, it doesn't display ...

Can the contents of a JSON file be uploaded using a file upload feature in Angular 6 and read without the need to communicate with an API?

Looking to upload a JSON file via file upload in Angular (using version 6) and read its contents directly within the app, without sending it to an API first. Have been searching for ways to achieve this without success, as most results are geared towards ...

Names of VueJs components

Currently, I am coding in VueJS and encountering the following scenario <li @click = "selectedComponent = 'appManagment'"><i class="ion-clipboard"></i>Management</li> My goal is to have the name displayed as {{selectedCo ...

Tips for generating a subprocess with exec within a TypeScript Class

I am looking to automate the process of creating MRs in GitLab. When a button is clicked in my React/Typescript UI, I want to trigger command-line code execution within my Typescript class to clone a repository. However, every time I attempt to use exec, I ...

A guide on crafting a precise description for the 'module.exports' feature

I have successfully exported a function in the following way: module.exports = function (options: any): RequestHandler { // Do something } Now, I am attempting to define the exported function properly. However, I am unsure if this is the correct appr ...

Tips on verifying the existence of a file in Nuxt

Currently working with Nuxt version 2.15.4 and I am looking to verify within my store code whether a file exists in the Nuxt directory using the fs-extra package. It's straightforward when dealing with modules because I can obtain the file path utili ...

Exploring matching routes with Next.js + Jest

Issue with Unit Testing MenuItem Component Despite my efforts to achieve 100% coverage in my component unit tests, I have encountered an uncovered branch specifically within the MenuItem component. To offer more insight, here is the parent component that ...

Guide on implementing a date selector for each button/option clicked using Vue.js

My experience with Vuejs is still fresh, and I've incorporated 3 buttons named chart1, chart2, and chart3. Whenever any of these buttons are clicked, I want a Date selection to appear in a radio type format. You can see an example below: https://i.ss ...

Ionic3 footer using ion-tabs

Is there a way to create a common footer for all pages with 5 buttons, where the first button is selected by default? The page opened by this first button should have three tabs. I have already created the tabs but am unsure how to add the footer without r ...