Vue3 reactive对象结合TypeScript Partial类型出现异常行为

这个问题的核心在于TypeScript的多余属性检查机制和Vue reactive函数的类型处理逻辑差异：

1. 纯TypeScript环境的严格检查
   当你直接给标注为Partial<User>类型的变量赋值对象字面量时，TypeScript会触发对象字面量多余属性检查——这是TS针对字面量赋值的特殊严格规则，只要字面量包含类型中未定义的属性，就会直接报错，这是符合预期的行为。

2. Vue reactive的类型兼容逻辑
   当你调用reactive<Partial<User>>({ alive: true })时，情况有所不同：

   • reactive的泛型参数是显式指定的Partial<User>，此时TypeScript会以类型兼容性而非多余属性检查来验证参数。函数参数的类型检查默认不启用多余属性检查，只要传入的对象字面量属性是目标类型的超集（包含目标类型所有可选属性，额外属性不冲突），TS就会允许赋值，所以声明阶段不会报错。
   • 但reactive返回的对象类型会被约束为UnwrapNestedRefs<Partial<User>>（即去掉嵌套ref后的Partial<User>类型），所以在类型系统中，这个对象并不包含alive属性。

3. 模板的类型检查逻辑
   Vue3的模板会基于组件上下文的静态类型进行严格检查，当你在模板中访问user.alive时，TS会根据user的静态类型（Partial<User>）校验，发现该类型没有alive属性，因此触发类型错误——但运行时这个属性是存在的，因为reactive会完整保留传入对象的所有属性。

简单来说：声明阶段因为函数参数的类型兼容规则绕过了多余属性检查，而模板检查严格遵循变量的静态类型，导致了这种“声明不报错，模板报错”的矛盾情况。

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