Open
Description
Vue version
3.5.6
Link to minimal reproduction
Steps to reproduce
Look at these DTS test: 348d9c6
This should be green but it is not working.
What is expected?
Typescript supports type inference in cases like this. Here is another, non-Vue example which works:
type exampleProps<T> = {
setup: (props: { multiplier: string }) => T
}
function defineComponent<T>(component: exampleProps<T>) {
return component;
}
function createExtendableSetup<PROPS, SETUP_RESULT>(setupFn: (props: PROPS) => SETUP_RESULT) {
return setupFn;
}
const testWithCreateExtendableSetup = defineComponent({
setup: createExtendableSetup((props /* PROPS is typed correctly */) => {
// This is a correct inferred string value, even when used in the return method
const foo = props.multiplier;
return {
foo
}
}),
})
So Vue should also be able to inference the "props" types correctly.
What is actually happening?
The inference is broken when a wrapping method is used. See the Github Commit example or the Playground example.
System Info
No response
Any additional comments?
We want to write a extension system for Vue components and therefore need to wrap the setup method like this:
setup: createExtendableSetup('originalComponent', (props) => {
const count = ref(1);
const multipliedCount = computed(() => count.value * props.multiplier);
return {
count,
multipliedCount,
};
}),
Our implementation is working fine. The only problem is that the types of the arguments are getting lost.