Vue 3，组合 API：“排除”TypeScript 实用程序类型导致道具验证错误

Question

我正在使用带有 Composition API 和 TypeScript 的 Vue 3，一切都是最新的稳定版本。

假设我有以下类型：

export interface Person {
    name: string;
}

export type Status = Person | 'UNLOADED' | null;

现在我想使用

Status

作为组件中的 prop，但删除

null

的可能性 - 因为已经在父组件中进行了验证，所以再次验证

null

是多余的。

为此，我们需要

Exclude

实用程序类型：

<script setup lang="ts">
const props = defineProps<{
    status: Exclude<Status, null>;
}>();
</script>

当我这样做时，组件内的所有验证都 100% 正确。

但是，当我运行应用程序并且

'UNLOADED'

作为 prop 值传递时，我收到以下警告：

[Vue warn]: Invalid prop: type check failed for prop "status".
Expected Object, got String with value "UNLOADED".

然后我决定将其翻译为Options API。而且，令我惊讶的是，这个声明完美地发挥了作用：

<script lang="ts">
import {defineComponent, PropType} from 'vue';

export default defineComponent({
    props: {
        status: {
            type: [Object, String] as PropType<Exclude<Status, null>>,
            required: true,
        },
    },
});
</script>

因此，在 Composition API 中，Vue 认为

Exclude

always 返回一个对象，并且由于字符串不是对象，因此它会抱怨（不存在的）道具验证错误。

这是某种错误吗？

如何使用 Composition API 解决这个问题？

Answer 1

此语法在 Vue 3.3+ 中生效

export interface Person {
    name: string
}
export type Status = Person | "UNLOADED" | null
const props = defineProps<{
    status: Exclude<Status, null>
}>()

< Vue 3.3

在组合 API 中，你应该以这种方式声明 props :

<script setup lang="ts">
import { PropType} from 'vue';

const props = defineProps({
    status: {
            type: [Object, String] as PropType<Exclude<Status, null>>,
            required: true,
        }
});
</script>

语法

defineProps<SomeType>()

仅支持：

• 类型文字
• 对同一文件中的接口或类型文字的引用

当前不支持复杂类型和从其他文件导入类型。将来有可能支持类型导入。