Type 'X' is missing the following properties from type 'Y'

[cmitjans-at-wiris]

When a reference to a Typescript Class is created, and the class has private properties/methods, this TS error appears (although the code compiles):

Type 'X' is missing the following properties from type 'Y': (private properties/methods)

Minimal reproducible example:

Class:

export default class MyClass {
  private value: number = 0

  public setNumber(newValue: number) {
    this.value = newValue
  }

  public getNumber(): number {
    return this.value
  }

  private privateMethod() {

  }
}

Parent component:

<template>
  <Child :my-class="myClass" /> <!--Type '{ setNumber: (newValue: number) => void; getNumber: () => number; }' is missing the following properties from type 'MyClass': value, privateMethodts -->
</template>

<script setup lang="ts">
import MyClass from './my_class';

const myClass = ref(new MyClass());
</script>

Child component:

<template>
  <h1> {{ myClass.getNumber() }} </h1>
</template>

<script setup lang="ts">
import MyClass from '~~/domain/my_class'

defineProps<{
  myClass: MyClass
}>();

</script>

[johnsoncodehk]

This is ref() types behavior, it can reproduce with below code:

// test.tsx
import { defineComponent, ref } from 'vue';
import MyClass from './test';

const myClass = ref(new MyClass());

<Child myClass={myClass.value} >

As solution, you can use ref(new MyClass()) as ShallowRef<MyClass>; / shallowRef(new MyClass()) / :my-class="(myClass as MyClass)".