如何避免TypeScript中Ref<string>到Ref<string | undefined>的不安全赋值？

这个问题的核心在于TypeScript对对象类型的协变处理：默认情况下，Ref<string>可以赋值给Ref<string | undefined>，因为string是string | undefined的子类型。但这种赋值是不安全的——通过后者的引用可以将undefined赋值给原本被约束为string的ref，破坏类型安全。

解决方案：用条件类型约束函数参数 #

要让TypeScript阻止这种不安全操作，我们可以通过条件类型检查传入的ref的value类型是否允许undefined，不满足则触发类型错误。

修改你的unsetRef函数如下：

type AllowsUndefined<T> = undefined extends T ? T : never;

function unsetRef<T>(r: Ref<AllowsUndefined<T>>) {
  r.value = undefined;
}

或者更简洁的写法，直接在函数参数中嵌入条件判断：

function unsetRef<T>(r: Ref<T>): undefined extends T ? void : never {
  r.value = undefined;
}

效果验证 #

• 当传入Ref<string>时，TypeScript会报错：因为undefined extends string不成立，参数类型会被解析为Ref<never>，与Ref<string>不兼容：

  const s1 = ref('hello')
  unsetRef(s1) // ❌ 类型错误：'Ref<string>' 不能赋值给 'Ref<never>'
  

• 当传入Ref<string | undefined>时，类型检查正常通过：

  const s2: Ref<string | undefined> = ref('hello')
  unsetRef(s2) // ✅ 正常调用
  

原理说明 #

条件类型undefined extends T ? T : never会对传入的T做判断：

• 如果T本身包含undefined（比如string | undefined），则返回T，参数类型匹配；
• 如果T不包含undefined（比如string），则返回never，导致参数类型不兼容，触发类型错误。

这种方式从根源上阻止了将不允许undefined的ref传入需要修改值为undefined的函数，保证了类型安全。

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