When I utilize reactive objects in Vue Composition API, I encounter Typescript errors relating to UnwrapRefSimple<T>.
This issue appears to be specifically tied to using arrays within ref().
For instance:
interface Group<T> {
name: string
items: T[]
}
export function useSomething<T extends object>({ model }: { model: T }) {
const groupsArray = ref([] as Group<T>[])
const group = {
name: 'someGroup',
items: [model],
}
groupsArray.value.push(group) // <-- this is where the problem arises
return {
groups: groupsArray,
}
}
The error message reads:
Argument of type '{ name: string; items: T[]; }' is not assignable to parameter of type '{ name: string; items: UnwrapRefSimple<T>[]; }'.
Types of property 'items' are incompatible.
Type 'T[]' is not assignable to type 'UnwrapRefSimple<T>[]'.
Type 'T' is not assignable to type 'UnwrapRefSimple<T>'.
Type 'object' is not assignable to type 'UnwrapRefSimple<T>'
I've experimented with adding UnwrapRef to the code:
import { UnwrapRefSimple } from "@vue/composition-api"
...
items: UnwrapRefSimple<T[]>
However, this leads to issues elsewhere in the code and makes it harder to follow.
Would appreciate any insights on handling this situation more elegantly.