'How to handle UnwrapRefSimple in Vue composition api with TypeScript

When using reactive objects Vue composition api I get Typescript errors about UnwrapRefSimple<T>.
This seems specifically the case when using arrays inside ref().

An example.

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 line is the problem

  return {
    groups: groupsArray,
  }
}

The error I get is:

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 tried things like adding UnwrapRef to the code:

import { UnwrapRefSimple } from "@vue/composition-api"
...
items: UnwrapRefSimple<T[]>

But then problems pop up elsewhere in the code and besides, this becomes difficule to read.
Does anyone know how to handle this nicely?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source