Vue3 + TypeScript props声明含null联合类型报错解决方案咨询

问题原因 #

Vue将基于类型的Props声明自动转换为运行时校验规则时，会把联合类型里的null当作构造函数处理，但null并非合法的Prop构造函数（PropConstructor），因此触发类型不兼容错误。

解决方案 #

无需修改原有ValueType类型，通过对象式Props声明结合PropType显式指定类型即可解决问题，同时保留对null的支持：

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

// 保留遗留代码中的原有ValueType类型
type ValueType = string | number | boolean | null;

const props = defineProps({
  selectedValue: {
    // 运行时校验指定允许的基础类型构造函数
    type: [String, Number, Boolean],
    // 显式声明TS类型为包含null的ValueType
    type: [String, Number, Boolean] as PropType<ValueType>,
    // 可选：设置默认值为null，匹配类型预期
    default: null,
    required: false
  }
});
</script>

方案说明 #

1. 运行时校验：type: [String, Number, Boolean]指定了允许的基础类型构造函数，配合required: false和default: null，Vue运行时会合法处理null值。
2. TS类型校验：as PropType<ValueType>将Prop类型断言为包含null的联合类型，让TypeScript正确识别selectedValue的类型为ValueType | undefined（因该Prop为可选）。

这种方式既保留了遗留代码的ValueType类型，又解决了TypeScript类型错误，同时保证运行时Props校验逻辑正常。

内容的提问来源于stack exchange，提问作者budgw