How to properly type reactive object

[MartinMalinda]

Let's say I have a reactive object like this:

const person = reactive({
 firstName: 'John',
 lastName: 'Doe',
 fullName: computed(() => `${person.firstName} ${person.lastName}`)
});

I'm struggling to find the correct ways to type this.

I could start right away with

interface Person {
 firstName: string;
 lastName: string;
 fullName: string;
}

That's how the end result is being used.

But this does not work because fullName is Ref<string>.

I could type it as Ref<string> in the interface but then the usage of this object would be wrong. TS would require person.fullName.value.

So far the best workaround I could think of is creating a wrap function like this:

// only to be used within `reactive()`
function comp<T>(cb: () => T) : T {
  return (computed<T>(() => cb()) as unknown) as T;
}

// or more general
function u<T>(ref: Ref<T>) : T {
  return (ref as unknown) as T;
}

const person : Person = reactive({
 firstName: 'John',
 lastName: 'Doe',
 fullName: u(computed(() => `${person.firstName} ${person.lastName}`)) 
});

It feels a bit hacky though, is there a better way?

[MartinMalinda]

Another approach would be that I'd have

interface PersonContent {
 firstName: string;
 lastName: string;
 fullname: Ref<string>
}
type Person = UnwrapRef<PersonContent>;

const person : Person = reactive<PersonContent>({ ... });

But that could be some extra work that I'm not sure is too useful. I don't really care about type checking which thing is ref or not, I care about the end result.

[pikax]

Same issue: vuejs/core#963

Don't think this can be fixed with better typings. as probably "cleaner" way:

const person = reactive({
      firstName: 'Awesome',
      lastName: 'Everyone',
      fullName: ''
    });

 person.fullName = computed(()=> [person.firstName, person.lastName].join(' ')) as any; // reactive will unwrap

[koooge]

Same here.
Another option is to type the response of the computed function. vuejs/core#963 (comment)
It works for me with beta19.

const person = reactive({
 firstName: 'John',
 lastName: 'Doe',
 fullName: computed((): string => `${person.firstName} ${person.lastName}`)
});

[github-actions]

Stale issue message