如何將 typescript 對象傳遞給 Vue 組件

Question

我將 Vue 2 與組合 API 插件和打字稿（3.9.7）一起使用。

我有一個名為Usp的相當簡單的類型，我想將其作為道具傳遞給名為UspSection的組件

USP類型如下

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[];
}

UspSection的腳本部分如下所示：

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

但是Vue在運行項目時給出了以下錯誤。 奇怪的是，該項目實際運行，但此錯誤會在控制台中彈出。

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

有誰知道這是什么原因造成的？

干杯

Answer 1

使用'@vue/composition-api' PropType 而不是'vue'本身

在您的情況下更改導入聲明：

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