why Ref try to acces fields instead of getters setters

Question

I have class like this : ( i'm using ts )

class FooClass
 {
    private _Id:number=0 ; 
    private _PrCode: number =0; 

    public get Id(): number {
        return this._Id;
    }

    public set Id(id: number) {
        this._Idproduit = id;
    }

    public get PrCode(): number {
        return this._PrCode;
    }

    public set PrCode(prCode: number) {
      
       this._PrCode = prCode;
    }
 }

inside i component if create a reactive variable like this :

 const Model = ref<FooClass|null>(null);

and when i want to pass it to a function say :

let FooFunc  = (FooClass|null) =>{//Do something} 

like this : FooFunct(Model) i get this error

Argument of type '{ Id: number; PrCode: number; }is not assignable to parameter of type 'FooClass'. type { Id: number; PrCode: number; } is missing the following properties from type 'FooClass': {_Id,_PrCode}

it's like the Ref Function try to Access "the private fields" and not the getters/setters how i can solve this ?

Answer 1

This is TypeScript error that doesn't happen at runtime, so it's not about private fields being actually accessed.

Private fields affect type compatibility in TypeScript. This can be used to force the incompatibility and prevent types from being accidentally matched with similar types. Here the opposite needs to be done, private fields need to be excluded from the type.

It should be:

type FooInterface = Pick<FooClass, keyof FooClass>
...
const Model = ref<FooInterface|null>(null);
let FooFunc  = (FooInterface|null) =>{//Do something}