script-setup use defineExpose, component should have typescript declaration
#4397
Comments
|
Calling |
|
I have same problem, when run but i don't konw how to fixed it |
|
The problem still exists...
|
|
Having the same issue. Any Workaround available? |
This comment has been minimized.
This comment has been minimized.
|
Having the same issue.Only checking by as any.
|
|
We should narrow the problem to this code, because defineComponent({
setup(_, { expose }) {
expose({ a: 1 })
}
})IMO |
|
Any updates on this one? |
|
In case this is useful for anyone, here's my current workaround: MyComponent.d.ts export interface IMyComponent {
doSomething(): void;
}MyComponent.vue <script setup lang="ts">
import type { IMyComponent } from './MyComponent';
defineExpose<IMyComponent>({
doSomething() {
// ...
},
});
</script>I don't use the As per where to place the interface declaration, as far as I understand it's not possible to add it in the |
|
This should be now fixed by @NoelDeMartin here #5035 |
|
But this is meant to be a temporary workaround, is that right? |
|
It is a workaround, but I'm not sure if it's temporary or the only viable solution with the current architecture. As far as I understand, |
// HelloWorld.vue
const helloWorld = () => {
window.alert('Hello World')
}
defineExpose({ helloWorld })// App.vue
const hello = ref<ComponentPublicInstance<typeof HelloWorld & { helloWorld: () => void }>>()
onMounted(() => {
hello.value?.helloWorld()
})It can track IDE autocomplete and work was fine. // App.vue
const hello = ref<{ helloWorld: () => void }>()
onMounted(() => {
hello.value?.helloWorld()
})If you wanna use methods or member of component, |
|
My workaround: // file: vue-type-helpers.ts
import { UnwrapRef } from '@vue/composition-api';
// or
import { UnwrapRef } from 'vue';
export type ExposedToComputed<T extends object> = {
[key in keyof T]: () => UnwrapRef<T[key]>;
};<script lang="ts">
import type { ExposedToComputed } from './vue-type-helpers';
export default {
computed: {} as ExposedToComputed<typeof exposed>,
};
</script>
<script setup lang="ts">
const exposed = { a: 1 }
defineExpose(exposed)
</script> |
|
I've been using this workaround: MyComponent.vue <script setup lang="ts">
function printHello() {
console.log("Hello from MyComponent!");
}
defineExpose({
printHello,
});
</script>
<template>
<div />
</template>App.vue <script setup lang="ts">
import { ref, onMounted } from "vue";
import MyComponent from "./MyComponent.vue";
// This could be extracted into a type helper: type ComponentType<C> = typeof C extends new () => infer T ? T : never;
type ComponentType = typeof MyComponent extends new () => infer T ? T : never;
const myRef = ref<ComponentType>();
onMounted(() => {
console.log(myRef.value?.printHello)
});
</script>
<template>
<MyComponent ref="myRef" />
</template> |
|
@leonzalion Maybe you should use |
|
This feature was added in volar v0.31.1 |
now update to the latest vue-tsc can fixed it |
|
is there any progress about the issue? |
|
@fengjrrz |
|
@xiaoxiangmoe Sorry but I don't think so (Volar v0.33.10). I've got still the same error when I use |
|
@StazriN Can you provide a minimal reproduction demo? |
Same problem with IntelliJ IDEA 2021.3.3 and vue-tsc 0.33.9 |
|
I was getting:
Until I updated my vue-tsc from 0.29.8. Here's the fix: |
Same problem with IDEA 2022.2.1 and vue-tsc 1.0.8 |
const galleryDetailRef = ref<InstanceType<typeof GalleryDetail>>();用 |
|
I still got the same error with Vue Language Features (Volar) v1.0.9. My component looks like this: function myExposedMethod() {
console.log("test");
}
defineExpose({
myExposedMethod,
});and I have a ref in the parent component like this: const myCompRef = ref<InstanceType<typeof NameOfMyComponent> | null>(null);but with the following line myCompRef.value?.myExposedMethod();I get the EDIT: |
You can try this way import NameOfMyComponent from '...your component address'
interface INewNameOfMyComponentType
extends ref<InstanceType<typeof NameOfMyComponent>> {
myExposedMethod(): void
}
const myCompRef = ref<INewNameOfMyComponentType>()then you can use the method myCompRef.value?.myExposedMethod();I used this way to solve my problem, you can try it too 😊 |
|
I am bumping into this issue as well, more or less, when I do this: I get the issue, (after turning Volar into takeover mode): Maybe it has something to do with the component being generic? |
|
I found this, may help you: @femans |
and others
What problem does this feature solve?
when my vue component 'MyComponent' use eg:
defineExpose({ a: 1 }), component instance can useinstanceRef.value.a, but component typescript declaration not have fieldawhen viaInstanceType<typeof MyComponent>What does the proposed API look like?
nothings
The text was updated successfully, but these errors were encountered: