I'm using Vue 2 with the composition API plugin and typescript (3.9.7).
I have a fairly straightforward type called Usp
which I'd like to pass as a prop to a component called UspSection
USP type is as follows
export interface Image {
sourceUrl: string;
}
export interface ImageWithText {
text: string;
image: Image;
}
export interface Usp {
title: string;
content: string;
order: number;
reverse: boolean;
carousel: ImageWithText[];
}
The script section of UspSection
looks like this:
<script lang="ts">
import Vue, { PropType } from "vue";
import { defineComponent, ref } from "@vue/composition-api";
import { Usp } from "../types/usp";
export default defineComponent({
props: {
usp: {
type: Object as PropType<Usp>,
required: true,
},
},
setup(props) {
const slideNo = ref(0);
console.log(props.usp);
return {
slideNo,
};
},
});
</script>
However Vue gives the following error when running the project. Strangely the project actually runs but this error pops up in the console.
ERROR in C:/Users/Oliver/Workspace/duet3d/client/src/components/UspSection.vue(34,16):
34:16 No overload matches this call.
Overload 1 of 3, '(options: ComponentOptionsWithoutProps<unknown, unknown, Data, {}, {}>): VueProxy<unknown, unknown, Data, {}, {}>', gave the following error.
Type '{ usp: { type: PropType<Usp>; required: true; }; }' is not assignable to type 'undefined'.
Overload 2 of 3, '(options: ComponentOptionsWithArrayProps<string, Data, Data, {}, {}, Readonly<{ [x: string]: any; }>>): VueProxy<Readonly<{ [x: string]: any; }>, Data, Data, {}, {}>', gave the following error.
Type '{ usp: { type: PropType<Usp>; required: true; }; }' is not assignable to type 'string[]'.
Object literal may only specify known properties, and 'usp' does not exist in type 'string[]'.
Overload 3 of 3, '(options: ComponentOptionsWithProps<ComponentPropsOptions<Data>, Data, Data, {}, {}, ({ [x: number]: string; } & { length?: number | undefined; toString?: string | undefined; ... 29 more ...; flat?: unknown[] | undefined; }) | ({} & { ...; })>): VueProxy<...>', gave the following error.
Type '{ usp: { type: PropType<Usp>; required: true; }; }' is not assignable to type 'string[] | ComponentObjectPropsOptions<Data> | undefined'.
Types of property 'usp' are incompatible.
Type '{ type: PropType<Usp>; required: true; }' is not assignable to type '(new (...args: string[]) => Function) | PropOptions<unknown, unknown> | (new (...args: any[]) => object) | (() => unknown) | PropConstructor<unknown>[] | null | undefined'.
Types of property 'type' are incompatible.
Type 'PropType<Usp>' is not assignable to type 'true | (new (...args: string[]) => Function) | (new (...args: any[]) => object) | (() => unknown) | PropConstructor<unknown>[] | null | undefined'.
Type 'new (...args: never[]) => Usp & object' is not assignable to type 'true | (new (...args: string[]) => Function) | (new (...args: any[]) => object) | (() => unknown) | PropConstructor<unknown>[] | null | undefined'.
Type 'new (...args: never[]) => Usp & object' is not assignable to type 'new (...args: string[]) => Function'.
Types of parameters 'args' and 'args' are incompatible.
Type 'string' is not assignable to type 'never'.
32 | import { Usp } from "../types/usp";
33 |
> 34 | export default defineComponent({
| ^
35 | props: {
36 | usp: {
37 | type: Object as PropType<Usp>,
ERROR in C:/Users/Oliver/Workspace/duet3d/client/src/components/UspSection.vue(45,17):
45:17 Object is of type 'unknown'.
43 | const slideNo = ref(0);
44 |
> 45 | console.log(props.usp);
| ^
46 |
47 | return {
48 | slideNo,
Version: typescript 3.9.7
Does anyone know what's causing this?
Cheers
use PropType from '@vue/composition-api'
not 'vue'
itself
in your case change import declaration:
import { defineComponent, PropType, ref } from '@vue/composition-api';
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.