Как правильно настроить swiper в react?

Question

[Алексей Абакумов]

Всем привет, настраиваю слайдер в react компоненте:

<Swiper
             spaceBetween={50}
             slidesPerView={1.3}
             onSlideChange={() => console.log('slide change')}
             onSwiper={(swiper) => console.log(swiper)}
           >

Выдает такую ошибку:
https://gyazo.com/604cf623ba9753d2eef333b4a9975be0

Пытался сделать интерфейс:

interface MySwiperProps extends SwiperProps {
    spaceBetween:  number;
  }

Но все равно ошибка есть.
И когда закрываю ошибку swiper работает.

Comments

[WbICHA]

Выдает такую ошибку:

И что в ней написано?

[Алексей Абакумов]

WbICHA, TS2322: Type '{ children: Element[]; spaceBetween: number; slidesPerView: number; onSlideChange: () => void; onSwiper: (swiper: SwiperClass) => void; }' is not assignable to type 'IntrinsicAttributes & RefAttributes & SwiperProps'.
Property 'spaceBetween' does not exist on type 'IntrinsicAttributes & RefAttributes & SwiperProps'.

Answer 1

[Aetae]

Компонент Swiper не ждёт свойства spaceBetween. Вы уверены, что оно хоть что-то делает?

Если это баг типизации Swiper и на самом деле он такое свойство ждёт, то вам следует репортить этот баг автору компонента (предварительно обновившись до последней версии).

В крайнем случае можно прибегнуть к declaration merging, но это вредный костыль:

declare module 'путь до типов компонента Swiper' {
  interface SwiperProps {
    spaceBetween: number;
  }
}

Answer 2

[Dimka59]

Попробуй обновить версию typescript до последней