-
|
Environment: VSCode + Volar (takeover mode, whatever version was released on 2023-10-17), Vue 3.3.4 I am not sure how to work around this issue. I have this interface: export interface ObjectHolder<T> {
theObject: T
}And in a Vue component, I have this code: <script lang="ts" setup generic="T">
import { computed, ref } from 'vue';
import { ObjectHolder } from './ListTypes';
const props = defineProps<{
modelValue: T[],
}>();
const savedItems = ref<ObjectHolder<T>[]>([]);
const addObject = (item: ObjectHolder<T>) => {
savedItems.value.push(item);
}
</script>I get the following error from the addObject function:
One solution I've found is to do this:
but this seems ugly. Is there a better way of dealing with this issue? thanks in advance |
Beta Was this translation helpful? Give feedback.
Replies: 4 comments 2 replies
-
|
This is likely a usage error instead of a bug: |
Beta Was this translation helpful? Give feedback.
-
|
@so1ve The link shows default basic setup - probably not what you initially shared, I suppose. Here is a basic example of the same problem as posted originally. 
|
Beta Was this translation helpful? Give feedback.
-
|
Anyone found a solution to this? I also ended up having to cast the type using |
Beta Was this translation helpful? Give feedback.
-
|
When generics are involved, you should use the // instead of this:
const foo = ref<ObjectHolder<T>[]>([]);
// do this:
const foo: Ref<ObjectHolder<T>[]> = ref([]);Now it works as one would expect and there is no need to deal with |
Beta Was this translation helpful? Give feedback.
-
<
8000
svg aria-label="Loading content..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="m-2 anim-rotate">
-
yeah but that's basically same as typecasting. I mean, I know it's not typecasting per se, but you're just saying "hey, this is a Ref of this, trust me, which makes it typecasting “in spirit.” Besides, if you do pass something that gets unwrapped, you can get into runtime errors because the T in the unwrapped ref won't be the same. I tried using something like type DoesntNeedUnwrapping<T> =
T extends UnwrapRef<T>
?
UnwrapRef<T> extends T
? T
: never
: never;It works from the usage point of view (you won't be able to pass an “unwrappable” object as T) — but it still infers the type as I feel like the only good solution here would’ve been if the export type DoesntNeedUnwrapping<T> =
T extends UnwrapRef<T>
? UnwrapRef<T> extends T
? T
: never
: never;
export function plainRef<T>(value: DoesntNeedUnwrapping<T>) {
return ref(value) as Ref<T>;
};
const r1 = plainRef({ hello: 'world' }) // ok
const r2 = plainRef({ hello: ref('world') })
// Argument of type '{ hello: Ref<string>; }' is not assignable to parameter of type 'never'. |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, it's a workaround to a typing bug in the Vue TS compiler. I'm going with the explicit |
Beta Was this translation helpful? Give feedback.
This is likely a usage error instead of a bug:
https://play.vuejs.org/#eNqNUsGK2zAQ/ZWpLknAtVv2ljqGtgSyPXSXbaCHKAevPU6UypKQZDdg/O8d2cSbhmVZg8Ga957emxl37KsxcdsgW7LUFVYYDw59YzKuRG209dCBxQp6qKyuYUbUGVdcFVo5D7U7wCrg89kGpdTwW1tZfpgtuEqT8Tq6iA4eayNzj3QCSI+fs64bxH2fJnQaqkKZxkP7sdYlyhVnhHNGUJpMahYx78i6Eof45LSi1F3Qclbo2giJ9sF4QdE4W8KABCynZH9/DDVvG4wu9eKIxZ9X6id3DjXOHi06tC1yNmE+twf0I7z+9RPP9D2BlLyRxH4DfEKnZRMyjrRvjSop9hVvSHs/zF6ow9atzx6VuzQVggZmP/A5o318f6P1l7h38d2g46qnKeaxdzS86xVHUGIlFD5abVwETzdL/8ItbZJeoTzaKi8QHp5PWPiNliXadJuRK8HB1x9xxJawDbX+ok23QENBVbpwf6qa+hltFmXzBayu9OPP5fIWy3vavRv/sfTGb7fP5rv9YgoWlC+auM1lg7tP+3hKE3u9PhutUHmRS0gS2KDFa/lonJflKCDfuaDLlret/h83PIH2HqcL/zZobBp3HMzGhgJnGFvP+n8oCzeV