Vue.js+TypeScript中能否为ref值设置联合类型？如何解决TS报错

Vue.js 搭配 TypeScript 的开发场景下，完全支持为ref设置联合类型，你遇到的类型报错和联合类型本身的定义无关，是ref用法和类型校验逻辑的问题。

报错根因 #

ref<File | null>(null)创建的是类型为Ref<File | null>的响应式包装对象，不是File | null类型的原始值：

• 在<script>代码块中访问ref包裹的实际值，必须通过.value属性获取，你直接把Ref包装实例传给了要求传入File类型的形参，类型自然不匹配
• 即便补了.value，拿到的值类型是File | null，和形参要求的纯File类型（不接受null）也存在类型不兼容问题

修复方案 #

按以下两点调整代码即可解决报错：

• 传参时通过.value获取ref存储的实际值
• 传参前增加非空判断，把值的类型从File | null收窄为File，满足形参的类型要求

修复后的参考代码：

type File = "A" | "B" | "C" | "D" | "E" | "F" | "G" | "H";
const selectedFile = ref<File | null>(null);
// selectedRank和selectedFile逻辑一致，同样是ref包裹的联合类型值
const selectedRank = ref<number | null>(null);

function move() {
  // 非空校验，值为null时直接终止逻辑，同时帮TS完成类型收窄
  if (selectedFile.value === null || selectedRank.value === null) {
    return;
  }
  // 此处TS会自动推断selectedFile.value的类型为File，不会再报类型错误
  const newPosition = new Position(selectedFile.value, selectedRank.value);
  // 其余业务逻辑...
}

如果你能100%保证调用move函数时，selectedFile和selectedRank一定已经完成赋值、不存在null的情况，也可以用TS的非空断言操作符!跳过校验，不过这种写法存在运行时风险，更推荐上面的显式校验写法：

function move() {
  const newPosition = new Position(selectedFile.value!, selectedRank.value!);
  // 其余业务逻辑...
}

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