Getting a Type Error with Ref on an instance of a Class with a private field 'value'

[fketchakeu]

Vue version

3.2.47

Link to minimal reproduction

https://play.vuejs.org/#eNp9kE9PwzAMxb+K5cs2aRpCcBrbpIJ2gAOgwTGXqnNLRppE+dNVqvrdcVN1cEDLKfJ7fv7ZHWbWrppIuMaNL5y0ATyFaEHlutoKDF7gTmhZW+MCdOCoXMKBSuihdKaGGffOHoQWulC595BBJzTws042eSBochUJtnDLpj75jPYB2vWQssl2LHHmXNMZsvliwa7NzQjCY3HJANxQymp18kYzZYoXWJjaSkXuzQbJgQLX02CBuVLm/JJqwUVaTvXii4rvf+on3w41ge+OPLmGBF60kLuKwijvP16p5f9FrM0xKnZfEQ/kjYoD42h7jPrI2H98ifY53Vfq6tPv20DaT0sNoIOzT36BfO6nK6v/4t6t7lMfXx37HzW3nrw=

Steps to reproduce

import { ref, Ref } from 'vue';

class A {
    private value = 1;
}

const x: Ref<A> = ref(new A());

What is expected?

No type errors

What is actually happening?

A type error as follows:

Type 'Ref<{}>' is not assignable to type 'Ref<UUID>'.

  Property 'value' is missing in type '{}' but required in type 'A'.

System Info

Binaries:
    Node: 18.19.1 - ~/.nvm/versions/node/v18.19.1/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v18.19.1/bin/npm
  Browsers:
    Chrome: 122.0.6261.111
    Edge: 122.0.2365.63
    Safari: 17.3.1

Any additional comments?

No response

[s3xysteak]

import { ref } from 'vue';

class A {
    private value = 1;
}

const x = ref<A>(new A());

will fix it.

[ashc0]

In this scenario, Ref iterates over each property of the object type you pass into it. However, private members are invisible to the outside. source code

[Shyam-Chen]

[jh-leong]

Closing as a duplicate of #2981.

As a workaround, see: https://github.com/vuejs/core/issues/2981#issuecomment-1831724017