Vue3+TypeScript自动解包导致类型检查错误求助

问题重现 #

定义Policy类：

import { type DefaultOptionType } from 'ant-design-vue/es/select';
import { ref, type Ref } from 'vue';

// 假设KindType已定义
type KindType = 'foo' | 'bar';

interface Selector {
  kind: KindType | undefined;
  destination: string | undefined;
  selectOptions: Ref<DefaultOptionType[]>;
}

export class Policy {
  uuid: string;
  selector: Selector = {
    kind: void 0,
    destination: void 0,
    selectOptions: ref<DefaultOptionType[]>([])
  };
  constructor() {
    // 假设uuid生成逻辑已实现
    this.uuid = crypto.randomUUID();
  }
}

在组件中创建响应式对象并推送实例时触发类型错误：

interface FormData {
  policies: Policy[];
}

const a = reactive<FormData>({
  policies: [new Policy()]
});

// 类型检查报错：Argument of type 'Policy' is not assignable to parameter of type '{ uuid: string; selector: { kind: KindType | undefined; destination: string | undefined; selectOptions: DefaultOptionType[]; }; }'
a.policies.push(new Policy());

错误原因 #

Vue的reactive会对传入的对象进行深层响应式转换，同时自动解包所有嵌套的Ref类型。这导致Policy类实例中的selector.selectOptions（原本是Ref<DefaultOptionType[]>）被解包为DefaultOptionType[]，TypeScript因此将a.policies的元素类型推断为一个与Policy结构一致的普通对象（而非Policy类的实例），最终引发类型不匹配。

解决方案 #

方案1：使用ref替代reactive包裹数据 #

ref对数组及类实例的处理逻辑不同，不会自动解包类内部的Ref属性，能保持原类型：

interface FormData {
  policies: Policy[];
}

const a = ref<FormData>({
  policies: [new Policy()]
});

// 调用时通过.value访问
a.value.policies.push(new Policy());

方案2：用markRaw标记Policy实例 #

markRaw会标记对象使其永远不会被转换为响应式对象，从而保留类实例的原始类型及内部Ref的结构：

import { reactive, markRaw } from 'vue';

interface FormData {
  policies: Policy[];
}

const a = reactive<FormData>({
  policies: [markRaw(new Policy())]
});

// 推送时同样标记实例
a.policies.push(markRaw(new Policy()));

方案3：调整类型定义（不推荐） #

若不需要类实例的原型方法，可将FormData的policies类型改为与reactive转换后的结构匹配的类型，但会丢失类的特性：

type PolicyPlain = {
  uuid: string;
  selector: {
    kind: KindType | undefined;
    destination: string | undefined;
    selectOptions: DefaultOptionType[];
  };
};

interface FormData {
  policies: PolicyPlain[];
}

const a = reactive<FormData>({
  policies: [new Policy() as unknown as PolicyPlain]
});

a.policies.push(new Policy() as unknown as PolicyPlain);

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