Как типизировать Swiper React?

Question

[Дмитрий Путилов]

Всем привет, возникла вот такая проблема, я ref добавил к swiper, но обращаться к newsListSwiperRef.current?.swiper можно только в том случае, если передать в типы any, а я хочу строгую типизацию сделать, но я не могу понять, какой тип нужно передать ,что бы это сработало, что я делаю не так, как сделать типизацию?

import React, {FC, useRef} from 'react';
import {Swiper, SwiperSlide} from "swiper/react";

const NewsListSlider:FC = () => {

    const newsListSwiperRef = useRef<any>(null)

    const nextElementSwiper = () => {
        if(!newsListSwiperRef.current)
            return false

        newsListSwiperRef.current?.swiper?.slideNext()

    }

    return (
        <div className={`w-1/2`}>
            <Swiper
                ref={newsListSwiperRef}
                slidesPerView={2}
            >

                <SwiperSlide>
                    <div className={`bg-black text-yellow`}>
                        test2
                    </div>
                </SwiperSlide>

                <SwiperSlide>
                    <div className={`bg-black text-yellow`}>
                        test2
                    </div>
                </SwiperSlide>

                <SwiperSlide>
                    <div className={`bg-black text-yellow`}>
                        test2
                    </div>
                </SwiperSlide>

                <SwiperSlide>
                    <div className={`bg-black text-yellow`}>
                        test2
                    </div>
                </SwiperSlide>

            </Swiper>

            <div onClick={nextElementSwiper}>
                test
            </div>
        </div>
    );
};

export default NewsListSlider;

Answer 1

[Alexandroppolus]

import {Swiper, SwiperSlide, SwiperRef} from "swiper/react";

...
const newsListSwiperRef = useRef<SwiperRef>(null);

Comments

[Дмитрий Путилов]

У меня почему то нет SwiperRef в библеотеки, вот все функции которые он экспортирует

[Alexandroppolus]

Дмитрий Путилов, какая у тебя версия swiper?

[Дмитрий Путилов]

Alexandroppolus,

"dependencies": {
    "@reduxjs/toolkit": "^1.9.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "axios": "^1.1.3",
    "node-sass": "^7.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.4.3",
    "react-scripts": "5.0.1",
    "sass": "^1.56.1",
    "swiper": "^8.4.4",
    "typescript": "^4.4.2",
    "web-vitals": "^2.1.0"
  }

Вот

[Alexandroppolus]

в 8.4.4 ещё нет, а в 8.4.5 есть

[Дмитрий Путилов]

Alexandroppolus, Спасибо большое, помогло

Остальным ->
Качайте версию 8.4.5 и все работает