仅当使用“--downlevelIteration”标志或“es2015”或更高版本的“--target”时,才能迭代类型“IterableIterator

2024-02-07

我正在尝试使用此 Slider 进行改进,但在 Next.js 项目中使用 TypeScript React 时出现以下错误:

“仅当使用‘--downlevelIteration’标志或使用‘es2015’或更高的‘--target’时,才能迭代类型‘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,所以我不知道如何解决这个问题。


TypeScript 代码被转换为 JavaScript。 TypeScript 开发人员必须决定他们想要瞄准哪个版本的 JavaScript。选择较低版本意味着代码可以在较旧的浏览器中执行,最终达到更大的用户群。开发人员仍然可以使用现代 JavaScript 功能,只要这些功能可以降级的到旧的 JavaScript 版本。

大多数现代 JavaScript 功能都可以在较低版本中模拟,但我们在处理时必须明确IterableIterator。如果你想编写依赖于IterableIterator,你必须增加你的target版本或设置downlevelIteration to true.

tsconfig.json:

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

更多资源:

  • Why is downlevelIteration默认不开启? https://stackoverflow.com/questions/53441292/why-downleveliteration-is-not-on-by-default
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

仅当使用“--downlevelIteration”标志或“es2015”或更高版本的“--target”时,才能迭代类型“IterableIterator” 的相关文章

随机推荐