Version

3.2.31

Reproduction link

github.com

Steps to reproduce

1. Clone the attached repo
2. npm i
3. Open App.vue file
4. See the TypeScript error on line 14

What is expected?

No TypeScript error appears while trying to use the reactive variables as values for the reactive objects with generic type

What is actually happening?

The current type description of reactive does not cover the case when there is a need to use Ref inside typed reactive

Since any usage of reactive variables is unwrapped inside reactive, the current type does not cover the described case

Related to #963

The generic describes the shape of the object you pass to reactive().

Your problem is that the interface doesn't properly describe the object that you pass in: the interface doesn't account for the ref. Ref<number> would be accurate.

or you do this instead:

> const form: Form = reactive({
  a: 1,
  // ts error
  b: counter
})

because the return value of reactive has refs unwrapped, so it matches the desired interface shape.