如何将打字稿对象传递给 Vue 组件

Question

我正在使用 Vue 2 组合 API 插件和打字稿 (3.9.7)。

我有一个名为 Usp 的相当简单的类型，我想将其作为 prop 传递给名为 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' 而非 'vue' 本身的 PropType

在你的情况下更改进口申报：

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

如何将打字稿对象传递给 Vue 组件

How to pass typescript objects to Vue components

typescript

vue.js

vue-composition-api