-
Notifications
You must be signed in to change notification settings - Fork 172
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
Typescript support for ref() #392
Comments
Since this library doesn't come with correct typings – missing component's exposed instance properties – you have to define it yourself. I'm using this <script setup lang="ts">
import { Carousel } from 'vue3-carousel';
type CarouselConfig = InstanceType<typeof Carousel>['$props']; // optional, use any
type CarouselExpose = {
updateBreakpointsConfigs: () => void;
updateSlidesData: () => void;
updateSlideWidth: () => void;
initDefaultConfigs: () => void;
restartCarousel: () => void;
slideTo: (slideIndex: number) => void;
next: () => void;
prev: () => void;
nav: {
slideTo: (slideIndex: number) => void;
next: () => void;
prev: () => void;
};
data: {
config: CarouselConfig;
slidesCount: Ref<number>;
slideWidth: Ref<number>;
next: () => void;
prev: () => void;
slideTo: (slideIndex: number) => void;
currentSlide: Ref<number>;
maxSlide: Ref<number>;
minSlide: Ref<number>;
middleSlide: Ref<number>;
};
};
const carouselRef = ref<CarouselExpose | null>();
</script>
<template>
<Carousel ref="carouselRef">
...
</Carousel>
</template> |
Thank you @TheKvikk this is a good workaround. i will be leaving this ticket open, since I think this should be included in the repo, instead of needing to manually add it to the project. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I dont know if this is a bug or a feature request.
Describe the bug
Currently there seems to be no way to set up the ref for the Carousel component in a typesafe way.
To have editors add typings and intellisense to the ref we would need to add a type to it.
As far as I know, there is no type to add to the ref to get the correct typings as
const carousel = ref<CarouselElement>(null);
To Reproduce
Steps to reproduce the behavior:
<Carousel>
to a components template part<Carousel ref="carousel">
const carousel = ref(null)
(property) Ref<null>.value: null
Property 'prev' does not exist on type 'never'.
What I tried to get around this:
Additional Info
I am trying to use this in a nuxt@3 environment with the "vue3-carousel-nuxt" wrapper
Expected behavior
vue3-carousel exports a typeing to be used with refs to be typesafe.
The text was updated successfully, but these errors were encountered: