使用 TypeScript 输入 Vue.js 3 的道具答案

【问题标题】：Props typing in Vue.js 3 with TypeScript使用 TypeScript 输入 Vue.js 3 的道具
【发布时间】：2021-02-26 02:25:07
【问题描述】：

我正在尝试使用组合 API 在 Vue 3 组件中输入提示我的道具。

所以，我正在这样做：

<script lang="ts">
import FlashInterface from '@/interfaces/FlashInterface';
import { ref } from 'vue';
import { useStore } from 'vuex';

export default {
    props: {
        message: {
            type: FlashInterface,
            required: true
        }
    },
    setup(props): Record<string, unknown> {
        // Stuff
    }
};

我的FlashInterface 看起来像这样：

export default interface FlashInterface {
    level: string,
    message: string,
    id?: string
}

此界面运行良好，但出现此错误的情况除外：

ERROR in src/components/Flash.vue:20:10
TS2693: 'FlashInterface' only refers to a type, but is being used as a value here.
    18 |    props: {
    19 |        message: {
  > 20 |            type: FlashInterface,
       |                  ^^^^^^^^^^^^^^
    21 |            required: true
    22 |        }
    23 |    },

我不明白为什么 TypeScript 认为这是一个值。

我错过了什么？

【问题讨论】：

标签： typescript vue.js vuex vuejs3 vue-composition-api

【解决方案1】：

您应该将它与从 vue 导入的 PropType 一起使用，例如 Object as PropType<FlashInterface>：

import FlashInterface from '@/interfaces/FlashInterface';
import { ref,PropType, defineComponent } from 'vue';
import { useStore } from 'vuex';

export default defineComponent({
    props: {
        message: {
            type: Object as PropType<FlashInterface>,
            required: true
        }
    },
    setup(props) {
            // Stuff
        }
});

注意：您应该使用defineComponent 创建您的组件以获取类型推断。

【讨论】：

如果 props 类型是数组呢？它将是 Array 作为 PropType 或 Object 作为 PropType ??
@FarhodNematov 应该是 type: Array as PropType<FlashInterface[]>, 或 type: Array as PropType<Array<FlashInterface>>,
谢谢。但我有问题。在我的脚本设置部分，我有一个类型为数组的道具。在脚本设置主体中，我想操作属性。所以 props = defineProps(messages: { type: Array as PropType<...> });然后我想获得计算属性。 const a = props.messages.find(m => 这里 m 必须是 FlashInterface 但idea不知道);想法不知道消息是数组。我不能给我建议。我该如何解决这个问题？

【解决方案2】：

编译器抱怨在type checking 期间缺少对（自定义）构造函数的引用（链接到旧文档，但与最新版本的 Vue 工作方式相同）。

在 Typescript 中，您可能希望将接口视为实体应遵守的契约，因此它们并不是真正的构造函数，因此，我们需要提供这些的实现接口。

由于你在 Typescript，如果需要保留接口，请考虑使用等效类：

// Name the constructor whatever you like,
// but I would personally prefix interfaces with an "I"
// to distinguish them with the constructors

class Flash implements FlashInterface {
  level: string;
  message: string;
  id?: string

  constructor() {
    // Be sure to initialize the values for non-nullable props
    this.level = '';
    this.message = '';
  }
}

export default {
  name: 'Home',

  props: {
    message: Flash
  }
}

文档摘录：

此外，type 也可以是自定义构造函数，并且断言将通过instanceof 检查进行。例如，假设存在以下构造函数：

props: {
  message: {
    type: function Person(firstName, lastName) {
      this.firstName = firstName
      this.lastName = lastName
    }
  }
}

当然，另一种选择是在另一篇帖子中建议的PropType。任何一个都可以。我猜这只是偏好问题。

【讨论】：