-
-
Notifications
You must be signed in to change notification settings - Fork 8.2k
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
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 |
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 fielda
when viaInstanceType<typeof MyComponent>
What does the proposed API look like?
nothings
The text was updated successfully, but these errors were encountered: