CODEWITHSUNDEEP
javascripttypescriptvue.jsvuejs2
jzia
jzia

Reputation: 61

Vue 2 and Typescript: VS Code Error TS2769 When passing ANY prop to custom component

I'm having a bit of difficulty with a Vue JS component, passing a custom prop. I'm using the Vue Options API without class component syntax.

However if I pass ANY prop to my custom component the-header, I am getting an error claiming that typescript does not recognise the overload on my component.

This happens no matter what prop I pass, so I believe I'm doing something wrong here.

A minimal example is below, would really welcome some support here!

// 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>

My 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"  
  ]
}

Error Message:

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)

Upvotes: 1

Views: 1124

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

To define a prop type you should use PropType helper imported from 'vue':

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

Upvotes: 1

Related Questions