React SlickでlazyLoadを使おうとしたら型が違うと怒られた

初めに

まず、React Slickのsettingsをこちらの公式docを参考に以下のように書きました。

 const settings = {
    dots: true,
    infinite: true,
    speed: 1000,
    slidesToShow: 1,
    slidesToScroll: 1,
    initialSlide: 0,
    autoplay: true,
    arrows: false,
    
    // ここが原因でエラー
    lazyLoad: true,
}

具体的なエラーの内容は型が違うということらしいです。

これが原因でlazyLoadが使用できなかったんですが、何とか解決できたので共有します。

解決策

エラー文には以下のように書かれていたので、

プロパティ 'lazyLoad' の型に互換性がありません。
型 'boolean' を型 'LazyLoadTypes | undefined' に割り当てることはできません。

自分でLazyLoadTypesを定義することで解決できました。

具体的なコード例は以下になります。

type LazyLoadTypes = "ondemand" | "progressive" | "anticipated";

  const settings = {
    dots: true,
    infinite: true,
    speed: 1000,
    slidesToShow: 1,
    slidesToScroll: 1,
    initialSlide: 0,
    autoplay: true,
    arrows: false,
    // LazyLoadTypesとして割り当てる
    lazyLoad: "ondemand" as LazyLoadTypes,
  };

これによって型の不一致がなくなります。

終わりに

何とか解決できたんですけど、もっと良い解決策があるような気がします。
こうすると良いよーってのがあれば教えて頂きたいです。

記事が参考になれば嬉しいです！