时间戳

首页 > 解决方案 > Vue 2 和 Typescript：将任何道具传递给自定义组件时出现 VS 代码错误 TS2769

javascript - Vue 2 和 Typescript：将任何道具传递给自定义组件时出现 VS 代码错误 TS2769

问题描述

我在使用 Vue JS 组件时遇到了一些困难，传递了一个自定义道具。我正在使用没有类组件语法的 Vue 选项 API。

但是，如果我将 ANY 属性传递给我的自定义组件the-header，我会收到一个错误，声称 typescript 无法识别我的组件上的重载。

无论我通过什么道具都会发生这种情况，所以我相信我在这里做错了什么。

下面是一个最小的示例，非常欢迎在这里提供一些支持！

// App.vue
<template>
  <v-app>
    <the-header
    :first_name='user.first_name'
    />
  </v-app>
</template>
<script lang="ts">
import Vue from 'vue'
import TheHeader from './components/UI/TheHeader.vue'
export default Vue.extend({
  components: {
    TheHeader,
  },
  computed: {
    user (): User {
      return this.$store.getters['user/getCurrentUser']
    },
  },
})
</script>

// TheHeader.vue
<template>
  <nav>
    <v-app-bar
    app
    class="header">
  </nav>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  name: 'TheHeader',
  props: {
    first_name: {
      type: String as Prop<string>,
      default: 'User'
    },
  },
})
</script>

我的tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest",
      "node",
      "vuetify"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/unit/*.ts",
    "tests/unit/*.tsx", 
    "tests/unit/setup/shims-vue.d.ts"
  ],
  "exclude": [
    "node_modules",
    "src/**/*.js",
    "src/**/*.jsx",
    "tests/**/*.js",
    "tests/**/*.jsx",
    "tests/e2e/*.ts",
    "tests/e2e/*.tsx"  
  ]
}

错误信息：

No overload matches this call.
  Overload 1 of 3, '(options?: ThisTypedComponentOptionsWithArrayProps<{ links: { route: {
 name: string; }; text: string; icon: string; }[]; } & { logout(): void; } & { user: User; 
registeredSince: string; } & { id: number; value: boolean; } & Vue, object, object, object,
 never> | undefined): CombinedVueInstance<...>', gave the following error.

  Overload 2 of 3, '(options?: ThisTypedComponentOptionsWithRecordProps<{ links: { route: {
 name: string; }; text: string; icon: string; }[]; } & { logout(): void; } & { user: User; 
registeredSince: string; } & { id: number; value: boolean; } & Vue, object, object, object,
 object> | undefined): CombinedVueInstance<...>', gave the following error.

  Overload 3 of 3, '(options?: ComponentOptions<{ links: { route: { name: string; }; text: 
string; icon: string; }[]; } & { logout(): void; } & { user: User; registeredSince: string;
 } & { id: number; value: boolean; } & Vue, DefaultData<{ ...; } & { ...; } & { ...; } & { 
...; } & Vue>, DefaultMethods<...>, DefaultComputed, PropsDefinition<...>, DefaultProps> |
 undefined): CombinedVueInstance<...>', gave the following error. (ts2769)

标签： javascripttypescriptvue.jsvuejs2

解决方案

要定义道具类型，您应该使用PropType从“vue”导入的助手：

import Vue,{PropType} from 'vue'
export default Vue.extend({
  name: 'TheHeader',
  props: {
    first_name: {
      type: String as PropType<string>,
      default: 'User'
    },
  },
})

推荐阅读