无过载匹配此调用与 Vue 3 ref<T>

Question

我定义了以下类型，我正在尝试与 ref 一起使用，不想一开始就定义所有道具默认值，但我是 TS 错误：否过载匹配此调用

interface EmailReminder {
  bcc_emails: string[] | null;
  cc_emails: string[];
  from_email: string;
  message: string;
  offset_days: number;
  subject: string;
  to_emails: string[];
  sent_at: string | Date;
  uuid: string;
}

当我尝试使用 Vue 3 ref 创建反应变量时，通过传递我的类型代替泛型，打字稿会生气并抛出以下错误。

const reminder = ref<EmailReminder>({
      to_emails: [],
      cc_emails: [],
      message: '',
      subject: '',
    });

有人能告诉我我做错了什么吗，我不想让一些属性成为可选的，事件也不想使用 as 来删除它们。

Answer 1

它们不是同一种类型，你在这里违背了打字稿的目的。如果您不希望对象被严格类型定义，也许只是坚持使用 javascript。你试图在这里分配 2 种不同的类型是编译器选择的。

缺少的必须是可选的，否则无论如何都会出现此错误。

interface EmailReminder {
  cc_emails: string[];
  message: string;
  to_emails: string[];
  subject: string;
  bcc_emails?: string[] | null;
  from_email?: string;
  offset_days?: number;
  sent_at?: string | Date;
  uuid?: string;
}

或者您可以将其他值初始化为未定义

const reminder = ref<EmailReminder>({
      to_emails: [],
      cc_emails: [],
      message: '',
      subject: '',
      bcc_emails: undefined
      from_email: undefined;
      offset_days: undefined;
      sent_at: undefined;
      uuid: undefined;
    });

如果您真的不想执行上述操作，我想您可以在技术上创建 2 种类型，并允许它成为其中之一

interface BaseEmailReminder {
  cc_emails: string[];
  message: string;
  to_emails: string[];
  subject: string;
}

interface ExtendedEmailReminder extends BaseEmailReminder {
  bcc_emails: string[] | null;
  from_email: string;
  offset_days: number;
  sent_at: string | Date;
  uuid: string;
}

然后去

const reminder = ref<BaseEmailReminder | ExtendedEmailReminder>({
      to_emails: [],
      cc_emails: [],
      message: '',
      subject: '',
    });

我建议使用可选成员，因为第二个 2 个示例是一种反模式 hack，它们并没有真正正确地遵循 typescript 行为，并且不是最佳实践，因为没有那些成员你说他们是可选的。

Answer 2

我能够想出一个解决方案，我们在我当前的组织中将其作为标准形式使用。

根本没有必要在 ref 中定义内部初始值。

示例：

ref 电子邮件提醒 >()

我知道变量的值是未定义的，但这是我遇到的最好的。

无过载匹配此调用与 Vue 3 ref<T>

No Overload Matches this call with Vue 3 ref<T>

typescript

vue.js

vuejs3