-
-
Notifications
You must be signed in to change notification settings - Fork 392
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Calling prop fields in the template (like props.foo
) doesn't work with withDefaults
#3204
Comments
Temp solution: change |
Hi, @pikax This also seems to be a vue/core type issue import { defineComponent, defineProps, withDefaults } from "vue";
export default <T>() => {
const props = withDefaults(
defineProps<{
value?: T | null;
list: T[];
}>(),
{
value: null,
}
);
const __VLS_internalComponent = defineComponent({
setup() {
return {
props: props,
};
},
});
const instance: InstanceType<typeof __VLS_internalComponent> = null as any;
// Property 'list' does not exist on type 'PropsWithDefaults<{ value?: T | null | undefined; list: T[]; }, { value: null; }, [T | null | undefined] extends [boolean | undefined] ? "value" : never> extends Ref<...> ? V : PropsWithDefaults<...> extends Ref<...> | undefined ? unknown extends V ? undefined : V | undefined : PropsWithDefaults<...>'.ts(2339)
// @ts-expect-error
instance.props.list;
}; |
@xiaoxiangmoe you're still changing the type of <script setup lang="ts" generic="T">
const props = withDefaults(defineProps<{
value?: T | null;
list: T[];
}>(), {
value: null,
});
</script>
<template>
<select>
<option v-for="item of list">
</option>
{{ $props.list }}
</select>
</template> While testing this I've noticed Volar does not resolve the type correctly when using instance type, altho it works in the eg: import MyComp from './MyComp.vue'
// this is errored
const el = ref<null | InstanceType<typeof MyComp>>(null) fixed code is const el = ref<null | InstanceType<typeof MyComp<any>>>(null) |
This fix doesn't work for me, still results in #3206
|
Hello, I have vue version 3.3.4 and upon using the generic type within the defineProps with defaults value managad with the new updates to make it work but when I come to build I encounter the below error with the defineEmits when I am emitting a generic type back error TS5088: The inferred type of 'default' references a type with a cyclic structure which cannot be trivially serialized. A type annotation is necessary. Tried <script setup lang="ts" generic="I extends any"> and also adding but nothing is removing this error, anyone has any idea how this can be solved? |
@xiaoxiangmoe @pikax Is there any progress on this? |
@rodrigocfd I'm working on this now, but I'm not sure if I can fix it 😂 |
When I use generic components, I get this error, How can I resolve it? <template>
<div>{{anyData.name}}</div> // Property 'name' does not exist on type '[{ type: PropType<T>; required: true; }] extends [Prop<infer V, infer D>] ? unknown extends V ? IfAny<V, V, D> : V : { type: PropType<T>; required: true; }'.ts(2339)。
<button @click="emit('taptap',anyData)"></button> // Argument of type '[{ type: PropType<T>; required: true; }] extends [Prop<infer V, infer D>] ? unknown extends V ? IfAny<V, V, D> : V : { type: PropType<T>; required: true; }' is not assignable to parameter of type 'T'.
</template>
<script lang='ts' setup generic='T extends { name: string }'>
defineProps<{
anyData:T,
}>()
const emit = defineEmit<{
(event:'taptap',value:T):void
}>()
</script> however, when i use this component in other component, i can get actually types |
I have the same issue. If you make the <template>
<div>{{anyData[0].name}}</div>
</template>
<script lang="ts" setup generic="T extends { name: string }">
defineProps<{
anyData:T[],
}>()
</script> This is dup of #3405. Is this a Volar issue or a Vue issue? Based on the OP, it's Volar. I'll have a poke around. Weird - I guess this worked at one point, at least according to the announcement post. I wonder if there has been a regression? |
Typescript issue I guess? :( IMO there are some type errors in vue core. |
I am trying to reproduce without using an SFC to establish where the issue is. I would be surprised if this was in Vue core - the PR is here, and it looks like it should be just fine: https://github.com/vuejs/core/pull/7963/files |
@johnsoncodehk While this works as expected in Volar and dev environment, it still crashes at |
Hi @rodrigocfd, could you please explain which kind of "crash"? Does it mean Vue Compiler cannot compile such code, or vue-tsc cannot generate types for it? |
@so1ve Compilation error. It says "
|
Which version of vue-tsc are you using? |
I was using v1.8.15, after updating to v1.8.18 (latest) it's working fine. Sorry, my bad. Thanks for the help. |
This is issue originated from this vue/core discussion. Apparently it's not a vue/core error.
This is the error:
Reproducible:
The text was updated successfully, but these errors were encountered: