vue3 with typescript 自动解包打字检查错误

Question

vue3 with typescript 自动解包打字检查错误 这是类定义

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

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() {
    this.uuid = uuid();
  }
}

这可以正常工作，但在组件中

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

当我使用时

a.policies.push(new Policy())

我收到错误：

Argument of type 'Policy' is not assignable to parameter of type '{ uuid: string; selector: { kind: KindType | undefined; destination: string | undefined; selectOptions: DefaultOptionType[]; }; ipblock: { ...; }; }'.ts-plugin(2345)
(alias) new Policy(): Policy
import Policy

仅类型检查错误

Answer 1

当您使用

[new Policy()]

初始化a.policies时，TypeScript会根据Policy实例推断策略数组的类型。

但是，因为您使用的是 Vue 的响应式函数，所以 Policy 实例被解包并且其响应式属性被公开。这意味着 TypeScript 将策略类型视为

Policy

展开属性的数组，而不是策略实例的数组。

要解决此问题，您可以显式声明

policies as Policy[]

的类型

这样的事情应该可以解决它。

const a = reactive({
  policies: [new Policy()] as Policy[]
});