"No overload matches this call." message in VS Code when using props in Vue.js

user_11303809 0
Viewed 1159

I have a Vue.js project that's giving me weird errors/warnings in VS Code:

enter image description here

  • This happens whenever I pass a value as a prop to one of my custom components - it doesn't happen on Vuetify components for example
  • It always displays this warning only on the first prop
  • It doesn't matter what type the prop is or what you pass to the prop
  • The project compiles with no errors, there's no errors in the browser console log either, and my project works just fine
  • I use the "regular/default" component style, not the class-based component style
  • I use TypeScript

Here's how the prop in the example image is defined in the child element that receives its value:

import Vue from 'vue';

export default Vue.extend({
    name: 'MyCustomComponent',

    props: {
        title: String,
    },

    data: function () {},
});

How can I get rid of these "useless" warnings?

Edit

As requested, here are the parent and child component scripts:

App.vue

<template>
    <v-app>
        <v-main>
            <hello-world :title="title" :heading="heading" />
        </v-main>
    </v-app>
</template>

<script lang="ts">
import Vue from 'vue';
import HelloWorld from './components/HelloWorld.vue';

export default Vue.extend({
    name: 'App',

    components: {
        HelloWorld,
    },

    data: () => ({
        title: 'Title!',
        heading: 'Heading!',
    }),
});
</script>

HelloWorld.vue

<template>
    <v-container>
        <v-row class="text-center">
            <v-col class="mb-4">
                <h1>
                    {{ title }}
                </h1>
                <h2>
                    {{ heading }}
                </h2>
            </v-col>
        </v-row>
    </v-container>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
    name: 'HelloWorld',

    props: {
        title: String,
        heading: String,
    },

    data: () => ({}),
});
</script>
vue.js visual-studio-code typescript
2 Answers

It looks like your problem originates from the vue-i18n plugin.

I made a codesandbox using your code and latest vue-2 compatible stack and I'm not getting the warning.

In conclusion, I suggest you look at the sandbox's package.json and update any packages you have and are at a lower version than what's in the sandbox.

It's quite possible you have an older version of typescript, you might want to start with it first.

If that doesn't fix it, upgrade vue-i18n and also check VSCode for any TS plugins/extensions VSCode might have installed. Try disabling or upgrading them.

If that doesn't work, this should fix it:

import { TranslateResult } from "vue-i18n";

export default {
  props: {
        title: [String, TranslateResult],
  },
}

But again, with "vue": "^2.6.14", "vue-i18n": "8.27.1" and "typescript": "~4.5.5" you shouldn't need it.

If none of the above fixes your problem, try creating a replica of your project on codesandbox.io or on vscode.dev. If you're able to repro it, save and share the link.

On the off-chance it might help, here's an older article outlining how cumbersome the marriage between vue-i18n and typescript used to be a couple of years ago: https://medium.com/js-dojo/manage-vue-i18n-with-typescript-958b2f69846f

user_185327110
user_9292360
Related