Classes with protected attributes throws ts-2322

[NathanAP]

Hello, this is a copy of my topic in vuejs/language-tools.

Original post:
Hey guys, I have a problem with classes. I'm not sure this is a bug so I'm creating it here first:

Lets consider two classes:

// base.ts
export default abstract class BaseModel {
    public id: string

    public createdAt: Date
    protected _createdBy: User | string
    
    // constructor
    
    get createdBy(): User {
        if (this._createdBy) {
            if (typeof this._createdBy === 'string')
                return new User({ id: this._createdBy })
            else return new User(this._createdBy)
        }
        return new User()
    }
    
    // others getters
}

// agent.ts
export default class Agent extends BaseModel {
    public name: string
    
    // constructor
}

Thats ok, right? I can access everything in Base through Agent, so I can do:

const agent = new Agent(myObject)
console.log(agent.id) // outputs an id
console.log(agent.name) // outputs a name
console.log(agent.createdBy) // outputs an user
console.log(agent._createdBy) // cannot be accessed because its protected

Now I'm trying to do:

const agent: Ref<Agent> = ref(new Agent()) 
// this throws ts-2322. It says my Ref is not compatible with type Agent (supposedly it has not _createdBy)

What am I doing wrong? This should be supported.

[s3xysteak]

playground

Could you provide a repro?

[NathanAP]

https://play.vuejs.org/#eNp9Ut9r2zAQ/lcOvSRlwcnWPhknsI3CNsY22j4KhmNfUnWyJKSTk2Hyv+9k4SZlpeAH67677/vuxyA+Olf0EUUpqtB45QgCUnSga7NfS0FBio00qnPWEwxAfx3CHe4W4HEHJ9h528GMCWbSSFNvA/m6IWh0HQLc2w7pUZk9DNIAuLjVqgHVlmBit0WfSjjsLWFD2AJhoDMG0FjDfLEh6+dXmQOACUOhWljD+4tAKp1CJ2n4kyab+F5vUQMeCU37nyXieMkaHMhmXpUM0SE/X8gdk9zsi+K+z4qsmep5eKxZpjlVo/yGc3lec4OH7Gd+xWzS8KgfVIc20pzV1pssOFYXfa0jPgsdrNctLGbw7gWsWlZewIfVasWE1TKvkBfGD8LO6ZqQXwBVq/rxB2AYMkOiPrFtBpcZrZYXNWLBy+d2dmpfPAVr+EJGd1I0tnNKo//pSHG7UpTToKSotbaHb2OMx4iLKd48YvPnlfhTOKaYFL88BvQ9SvGMUe33SBm+vf/Bdi/AzrZRc/Yb4B0Gq2PymNM+RdOy7Yu80e3X8bb5Ah7CbbqSMDWVjI7bHfOl4Cv//EbrZ7vXxc10FTzF3z36xMkDZKC4vhGnfyubJ6w=

[s3xysteak]

That may be a bug. You could open a issue bring this issue to the attention of Vuejs team