[英]How to handle UnwrapRefSimple in Vue composition api with TypeScript
When using reactive objects Vue composition api I get Typescript errors about UnwrapRefSimple<T>
.使用反应性对象 Vue 组合 API 时,我收到有关
UnwrapRefSimple<T>
的 Typescript 错误。
This seems specifically the case when using arrays inside ref()
.在
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:我尝试过将
UnwrapRef
添加到代码中:
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?有谁知道如何很好地处理这个?
const groupsArray = ref<T[]>([]) as Ref<T[]>
见: https ://github.com/vuejs/core/issues/2136#issuecomment-908269949
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.