Wrong classes interpretation

[NathanAP]

Vue - Official extension or vue-tsc version

2.0.26

VSCode version

1.90.2

Vue version

3.4.31

TypeScript version

5.5.3

System Info

tbh not sure if this is relevant because I'm in Gitpod.

Steps to reproduce

Hey guys! Sorry if this is not the right place to post my situation.

I have the following code where it used to work some time ago (TS 5.3.3 for sure):

export type VisualizationItem = {
    index: number
    title: string
    value: string
    object: Database
}

const databaseList = ref<VisualizationItem[]>([])
const selectedItem = ref<string[]>([])

const selectedDatabase = computed(() => {
    if (!selectedItem.value.length) return null

    const databaseFound = databaseList.value.find(
        (v) => v.value === selectedItem.value[0]
    )
    if (!databaseFound) return null

    return databaseFound
})

But when I do something like...

function test(object: Database) { 
   console.log(object.id)
}

if (selectedDatabase.value)
   test(selectedDatabase.value.object) // this throws ts-plugin(2345)

...2345 error is being thrown, which doesn't make sense because my selectedDatabase should be a VisualizationItem. Looking forward in this, I discovered that when I hover over my computed or ref variables, the following is being shown:

It seems that vs code can no longer identify that my object part is a Database and it shows me as a simple object, which throws the following:

Edit: I tried const databaseList: Ref<VisualizationItem[]> = ref([]) and this works fine.

What is expected?

No errors should be thrown because everything is typed.

What is actually happening?

TS 2345 is thrown and it says that my variable has the wrong type.

Link to minimal reproduction

No response

Any additional comments?

No response

[NathanAP]

Someone told me the recommended way to make create a typed ref is by doing const databaseList: Ref<VisualizationItem[]> = ref([]) and it fixes my problem. If this is the right behaviour, you guys can close this issue.

[davidmatter]

if (!selectedDatabase.value)
   test(selectedDatabase.value.object) // this throws ts-plugin(2345)

In this case selectedDatabase.value is null - it must throw.

[NathanAP]

Ah yes. Sorry, it was my mistake when I was writing the issue. The if checks for null values. I edited it.

The error image is right, though. It says that object is not type "Database".

[davidmatter]

Like this? I think there's something missing in your example.

https://play.vuejs.org/#eNp9U02P0zAQ/SvGl02lVRYJTlVTiY9FWoQAAeJS9+Amk6yLY0f2uBSq/nfGdpttS7U5xeM3b96bGe/4m2EoNwH4lM987dSATEvTVYKjF5x5wDDMhVH9YB2ynYP2ltW2HwJCs2etsz27ofQbghgE18oa2HuJciU9sJ0wjKlmykzoV+CE2QsD28SEfwZgP5UPUqu/EpU1Dwg9q3IOZZkGtk+JMYQKNUyZR6dMl0MbqcNFyK7WUON0FJGK1tZ4ZM0h9EnRoWLkZfafgsVyXiyWk2OKB01s0BzExZRcbMRdIkfz1dinopiwaj46a1nx4pS3TC5KDabDxwnVwOAMOdc6sseUc/kfbDAN0Z/aOXC01LYi58Sv2KTCm3zLqqo6M5TDi5fLnEFmRn1nta5qOoTOgNTr1JE2mDo2lCF4LC4nMmE7ljiiLavJue0OoFI1READo3UiGZc9zYKzzkR9HVBmMsLN7vJO0wbTgSwPWiLk093Jkd/SupOcVnXl2ltDryFNS/A4Q6XBfRmiIXoS0+McBZda298fUwxdgNtjvH6E+teV+NpvY0zwrw48uA0IPt6hdB1gvr7//hm29D9e9rYJmtDPXH4DamWIGjPsLY2DZJ/gktqH9I5pf3/4+y2C8UdTUWhE7hNecHrT756x/iT3Vfk65dHY+P4f9Rl6uw==

[NathanAP]

You can see the same effect in your example, but in mine is like this:

https://play.vuejs.org/#eNp9U02P0zAQ/SuDL5tKVRYJTlVTiY9FWoQAAeJS95Amk6yLY0f+KIWq/33Hdpptu9XmFM+8efPejL1n7/o+33pkMza3lRG9A1mqtuDMWc7AovP9givR9do42BtsplDprvcO6wM0RndwQ+U3XHFVydJa+Fi6cl1ahD1XAND7tRQViHoGyndrNFwdAhh3kdH96xF+C+tLKf6XTmh177CDYqgGoWrcPZWGkBNO4gysM0K1KbQtpb8I6fUGKzcb5QxtK62sg3oIfhF0KIBczZ9pWK4W2XI1OZZYlMSH9SAvlKR2I+4SOQ6iGCeWZRMoFqO3BrJXp7x59JFLVK17mFAP540i71IG9lByLv+T9qom+lM7A0dDg8tSTfiybWy8TVkoiuLMUAovX69SBZkZ9Z31uqppCJ0BadpxIo1XVRgoOLQuu9zJBPYQOYItLcm5bgdQLmoiiCsLMi5nmgQnnZH6OiBPZISb36bbTXeZDmS5l6XDdLo9ObIpXXyS04g231it6F3EbXEWdigkmm99MESPY3bcI2ellPrv5xhzxuP0GK8esPpzJb6xuxDj7LtBi2aLnI05V5oWXUrf/fyKO/ofk52uvST0C8kfSKP0QWOCvad1kOwTXFR7H1803d9f9m7nUNmjqSA0IA8Rzxm97g8vWH+S+yZ/G+tobezwCBxdfj0=

If you pass your mouse over databaseList or selectedDatabase, you see that it shows object being an Object and not a Database.

Someone in Discord told me its because how ref unwrap stuff and I should use Ref to type it properly. If this is working as intended, thats fine.