How to pass typescript objects to Vue components

Question

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

mfka · Accepted Answer · 2021-02-24 08:55:50Z

3

use PropType from '@vue/composition-api' not 'vue' itself

in your case change import declaration:

import { defineComponent, PropType, ref } from '@vue/composition-api';

answered Feb 24, 2021 at 8:55

mfka

1086 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to pass typescript objects to Vue components

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related