时间戳

首页 > 解决方案 > 使用 TypeScript 输入 Vue.js 3 的道具

typescript - 使用 TypeScript 输入 Vue.js 3 的道具

问题描述

我正在尝试使用组合 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 认为这是一个值。

我错过了什么？

标签： typescriptvue.jsvuexvuejs3vue-composition-api

解决方案

您应该将它与PropType从 vue 导入的一起使用，例如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来获得类型推断。

推荐阅读