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

Question

I have the following type defined

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;
}

And I am trying to use it with Vue 3's ref and don't want to define all the properties initially.

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

But without all those required properties. I get a TS error: No Overload Matches this call when using my EmailReminder type instead of the generic

Could someone please tell me what I am doing wrong here, I don't want to make some properties optional and also don't want to use as to remove them.

Answer 1

I was able to come up with a solution that we use in my current organization as a standard form.

It's simply not necessary to define inner initial values within the ref.

Example:

ref<EmailReminder>()

I know the value of the variable will be undefined, but it's the best that I came across.