next.js 只有< number>在使用“--downlevelIteration”标志或使用“es 2015”或更高版本的“--target”时,才能迭代类型“IterableIterator”

jaql4c8m  于 2022-11-05  发布在  其他
关注(0)|答案(1)|浏览(629)

我尝试使用此Slider进行改进,但在Next.js项目中使用TypeScript React时出现以下错误:
“只有在使用”--downlevelIteration“标志或”--target“为”es 2015“或更高版本时,才能迭代类型”IterableIterator“。”
代码如下:

import { useKeenSlider } from 'keen-slider/react'
import React, { useState } from 'react'
import 'keen-slider/keen-slider.min.css'
import './styles.css'

export default function Slider() {
  const [currentSlide, setCurrentSlide] = useState(0)
  const [loaded, setLoaded] = useState(false)
  const [sliderRef, instanceRef] = useKeenSlider({
    initial: 0,
    slideChanged(slider) {
      setCurrentSlide(slider.track.details.rel)
    },
    created() {
      setLoaded(true)
    }
  })

  return (
    <>
      <div className="navigation-wrapper">
        <div ref={sliderRef} className="keen-slider">
          <div className="keen-slider__slide number-slide1">1</div>
          <div className="keen-slider__slide number-slide2">2</div>
          <div className="keen-slider__slide number-slide3">3</div>
          <div className="keen-slider__slide number-slide4">4</div>
          <div className="keen-slider__slide number-slide5">5</div>
          <div className="keen-slider__slide number-slide6">6</div>
        </div>
      </div>
      {loaded && instanceRef.current && (
        <div className="dots">
          {[
            ...Array(instanceRef.current.track.details.slides.length).keys()
          ].map(idx => {
            return (
              <button
                key={idx}
                onClick={() => {
                  instanceRef.current?.moveToIdx(idx)
                }}
                className={'dot' + (currentSlide === idx ? ' active' : '')}
              ></button>
            )
          })}
        </div>
      )}
    </>
  )
}

我遵循了Keen Slider文档,但是这个例子是用JavaScript编写的。因为我使用的是TypeScript,所以我不知道如何解决这个问题。

0dxa2lsx

0dxa2lsx1#

TypeScript被移植到JavaScript。为了达到更大的用户群,他们可能仍然在使用较低版本的JavaScript,TypeScript编译器通常也被配置为针对较低版本。大多数现代功能甚至可以在较旧的版本中 * 模仿 *。这就是为什么即使你的目标版本可能已经超过10年了,你仍然可以使用JavaScript的大多数最新功能。
IterableIterator不能在旧版JavaScript中被简单地模拟。TypeScript要求您增加目标版本或将downlevelIteration设置为true。

{
  "compilerOptions": {
    "target": "es2015"
    // or
    "downlevelIteration": true
  }
}

相关问题