“没有与此调用匹配的过载。” 在 Vue.js 中使用 props 时 VS Code 中的消息

Question

我有一个 Vue.js 项目，它在 VS Code 中给出了奇怪的错误/警告：

• 每当我将一个值作为 prop 传递给我的自定义组件之一时，就会发生这种情况 - 例如，在 Vuetify 组件上就不会发生这种情况
• 它始终仅在第一个道具上显示此警告
• prop 的类型或传递给 prop 的内容并不重要
• 该项目编译没有错误，浏览器控制台日志中也没有错误，我的项目运行得很好
• 我使用“常规/默认”组件样式，而不是基于类的组件样式
• 我使用 TypeScript

以下是示例图像中的 prop 在接收其值的子元素中的定义方式：

import Vue from 'vue';

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

    props: {
        title: String,
    },

    data: function () {},
});

我怎样才能摆脱这些“无用”的警告？

编辑

根据要求，以下是父组件和子组件脚本：

应用程序.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>

Answer 1

看起来你的问题源于插件vue-i18n。

我使用你的代码和最新的 vue-2 兼容堆栈制作了一个codesandbox，但我没有收到警告。

总之，我建议您查看沙箱的package.json并更新您拥有的且版本低于沙箱中版本的所有软件包。

您很可能拥有旧版本的typescript，您可能想先从它开始。

如果这不能解决问题，请升级vue-i18n并检查 VSCode 是否有 VSCode 可能已安装的任何 TS 插件/扩展。尝试禁用或升级它们。

如果这不起作用，这应该可以解决它：

import { TranslateResult } from "vue-i18n";

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

但同样，使用"vue": "^2.6.14", "vue-i18n": "8.27.1"and"typescript": "~4.5.5"你不应该需要它。

如果以上方法都不能解决您的问题，请尝试在codesandbox.io 或vscode.dev 上创建项目的副本。如果您能够重现它，请保存并共享链接。

如果可能有帮助，这里有一篇较旧的文章概述了几年前的婚姻是多么麻烦：vue-i18nhttps ://medium.com/js-dojo/manage-vue-i18n-with-typescript -958b2f69846ftypescript