如何使用 TypeScript 处理 Vue 组合 api 中的 UnwrapRefSimple

Question

当使用响应式对象 Vue 组合 api 时，我收到有关 的 Typescript 错误UnwrapRefSimple<T>。
在 内部使用数组时尤其如此ref()。

一个例子。

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,
  }
}

我得到的错误是：

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>'

我尝试过添加UnwrapRef到代码中：

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>'

但随后代码中的其他地方会出现问题，而且这会变得难以阅读。
有谁知道如何很好地处理这个问题？

Answer 1

const groupsArray = ref<T[]>([]) as Ref<T[]>

请参阅：https ://github.com/vuejs/core/issues/2136#issuecomment-908269949