typescript types for swiper webcomponents

[patrickkmatias]

hi 👋🏾

I'm creating a web application using qwik framework and it is based on typescript, so my IDE started complaining about unknown types from swiper elements (<swiper-container>).

I did some research and I've found only some similar problem with react here, but it didn't help me, so I thought that it would be cool to share with somebody else if you are facing the same trouble.

It happens that swiper has a file with type notations on swiper/types directory, so all that I had to do was to extend the base HTMLElement class with Swiper's class, and it solved the types problem:

import type { Swiper } from "swiper/types";

const swiper = useSignal<HTMLElement & { swiper: Swiper }>();

...

=)