Using generic for ref() causes error when reassigning

[ycmjason]

Vue version

3.2.40

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-rpmhsh?file=src/main.ts

Steps to reproduce

ref(t) where t is of type generic T will cause error when reassigning the ref to a value of T.

What is expected?

expected refOfT.value = t to work

What is actually happening?

Got an error

Type 'T' is not assignable to type 'UnwrapRef<T>'.

System Info

No response

Any additional comments?

No response

[yyx990803]

Unfortunately this is because ref values have to expose the "unwrapped" type, which unwraps nested refs, to ensure value access correctness:

const a = { b: ref(0) }
const c = ref(a)

c.value.b // should be number

c.value = a // same error you saw

To fix this we will need TypeScript to allow specifying different type constraints for getter and setter of the same property. See microsoft/TypeScript#43662

[ycmjason]

@yyx990803 understood.

Perhaps at least we can deal with generics that extend primitive types?

https://stackblitz.com/edit/vitejs-vite-hmunsf?file=src%2Fmain.ts

E.g.

const f = <T extends string>(someT: T) => {
  const t = ref(someT);
  t.value = someT; // expected no error
};

const g = <T extends number>(someT: T) => {
  const t = ref(someT);
  t.value = someT; // expected no error
};

In these cases, we can be sure that ref(t) would return Ref<T> because I believe primitive type can't be a Ref?

[Anoesj]

Unfortunately this is because ref values have to expose the "unwrapped" type, which unwraps nested refs, to ensure value access correctness:

const a = { b: ref(0) }
const c = ref(a)

c.value.b // should be number

c.value = a // same error you saw

To fix this we will need TypeScript to allow specifying different type constraints for getter and setter of the same property. See microsoft/TypeScript#43662

Now that that PR was merged into TS 5.1, can this get some attention? I think this is a pretty common pattern, which I totally expected to work when Vue 3.3 landed.

[Loongphy]

What should we do about generics?

function test<T extends Record<string, any>>(someT: T) {
  const t = ref(someT)
  t.value = someT  // errors
};