I've encountered an issue with a Vue JS component that involves passing a custom prop. I am utilizing the Vue Options API without utilizing the class component syntax.
Whenever I pass ANY prop to my custom component the-header, I receive an error stating that typescript cannot recognize the overload on my component.
This error occurs regardless of which prop I try to pass, so it seems like there is something incorrect in my implementation.
Below is a minimal example, and I would greatly appreciate any assistance!
// 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)