withDefaults shows error when using generic
#8310
Comments
|
I'm having the same issue using type Props = {
options: T[];
valueKey: keyof T;
displayKey: keyof T;
multiple?: boolean;
closeMenu?: boolean;
};
const props = withDefaults(defineProps<Props>(), {
multiple: false,
closeMenu: false,
});
|
|
@pikax This is work as intended For example: function someFunction<T extends string | null>(
test: T = 'test'
) {
}So withDefaults should throw a error for this, also. |
|
Can't generic and withDefaults be used together? |
|
There is also a BUG, |
+1 |
|
Same error, this should be documented if it is intended. At least they don't show an example in the official documentation. |
@pikax 's demo is TypeScript's feature. Not Vue's feature. |
|
@an501920078 The problem you are having is not the same as the problem with pikax. It is recommended to file an issue separately. |
But If this fails on purpose because TypeScript is unable to do it, it should rather be documented in Vue because the mayority is Vue code here: <script setup lang="ts" generic="T">
const props = withDefaults(defineProps<{
modelValue: T;
title?: string;
}>(), {
title: 'Hello',
});
</script> |
|
Okay, there is already an issue but you closed it and the other issue referenced this one. That's why I thought we should continue here. Sorry my mistake |
<script setup lang="ts" generic="T extends { a: string }">
const props = withDefaults(
defineProps<{
foo?: T;
}>(),
{
foo: () => ({ a: '' })
},
);
const emit = defineEmits<{
(event: 'update:foo', foo: T): void;
}>();
function onClick(){
emit('update:foo',props.foo)
}
</script>
<template>
<div @clicko="onClick" >hello, the comp</div>
</template><script setup lang="ts" >
import TheComp from './TheComp.vue'
const foo:{ a: string, b: number }|undefined = undefined
const console = globalThis.console
</script>
<template>
<TheComp :foo="foo" @update:foo="console.log($event.b.toString())"/>
</template>This will throw an exception. So we can't use code as @pikax 's initial demo
If you don't care about type safety very much, and allow a small part of type unsafety to appear, you can consider <script lang="ts" generic="T extends string | null">
withDefaults(defineProps<{
test: T
}>(), {
test: () => 'test' as T // UNSAFE code, if don't care about type safety here, use at your own risk.
})
</script>But currently, the later code also throw a error. Maybe Vue should fix it. |
|
@xiaoxiangmoe So in the end, all comes down to |
<!-- the original demo -->
<script lang="ts" generic="T extends string | null">
withDefaults(defineProps<{
test: T
}>(), {
test: () => 'test'
})
</script>@Anubarak If the original demo is supported, it will introduce serious type safety issues, so I express my strong disapproval. And then I discuss with @pikax to change his demo from I'm very sorry, before communicating with pikax, I didn't notice that there is such an unsafe use requirement of
I think the usage in #8331 is the reasonable and legal usage. And it have a better demostration about can't use generics along with withDefaults, maybe more people need this usage. |
|
@xiaoxiangmoe I guess we talk about two different things or maybe I don't understand what you mean at all. Because no demo here works... I always get the very same error Even with casting I would be happy if you could provide a working example - even if it's not type save or ugly or whatever but at least an example that does not throw the |
|
After I update to 3.3.2 same error occurred:
When I use interface instead of type there are error too:
|
|
@rodrigocfd it was realeased on 3.3.3 |
|
@pikax what am I doing wrong here?
Reproducible: <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 props.list">
</option>
</select>
</template>Using:
|
|
@rodrigocfd 
|
|
@pikax thanks for the tip. But since |
|
@rodrigocfd your issue is not the same issue on this issue, you can open another issue if you think your usage is valid. The issue is not present inside the <script setup lang="ts" generic="T">
const props = withDefaults(
defineProps<{
value?: T | null;
list: T[];
}>(),
{
value: null,
}
);
//no error here
for (const it of props.list) {
console.log(it);
}
</script>
<template>
<select>
<option v-for="item of props.list"></option>
</select>
</template>
A fix might be possible by shortcuting the types resolve on the |
|
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
Tried but nothing is removing this error, anyone has any idea how this can be solved? |
Vue version
3.3.2
Link to minimal reproduction
https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgEwKYDNgDtUAUoRgDOANHAO7AwAWAIhgIYCuANjEXAL5zoEhwByAG5NUAgFDj0TLAGMYwCFh4MA1qgDCEcEtRYYAHgAqcVAA8Ye5ByIwo2AOZwAPnCysWAPgAUASkTicEFwUKgwTFDKlDT06MxsRN5omDj4hEQGCIHBOZa2AFxwRtlBnD6+ZFk5uagFcH5wALyegnkwEjmcvuKc4kA
Steps to reproduce
Or
What is expected?
The error not to be showing, like the non generic version:
Or
What is actually happening?
withDefaultsis not accepting the generic typeSystem Info
No response
Any additional comments?
No response
The text was updated successfully, but these errors were encountered: