使用 TypeScript 在 Vue.js 3 中输入的道具

Question

我正在尝试使用组合 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 |    },

我不明白为什么打字稿认为这是一个值。

我错过了什么？

Answer 1

您应该将它与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以获得类型推断。

Answer 2

两班轮

<script setup lang="ts">
import FlashInterface from '@/interfaces/FlashInterface';
defineProps<{flash: FlashInterface;}>();
</script>