Next.js TypeScript React项目使用Keen Slider遇IterableIterator迭代错误

问题原因 #

你遇到的错误是因为TypeScript在编译目标版本低于ES2015时，不支持直接用扩展运算符...遍历Array.keys()返回的IterableIterator<number>类型。原JS示例里的[...Array(length).keys()]写法在TS中会触发类型检查报错。

解决方案 #

有两种常用的解决方式，选其中一种即可：

方式1：调整TypeScript编译配置

修改项目根目录下的tsconfig.json，在compilerOptions里设置更高的编译目标，或者开启downlevelIteration：

{
  "compilerOptions": {
    // 方案A：把编译目标设为ES2015或更高
    "target": "es2015",
    // 方案B：如果需要保留低版本目标，开启这个选项
    "downlevelIteration": true
  }
}

修改后重启开发服务器，错误会自动消失。

方式2：替换迭代器写法为兼容TS的数组生成方式

不用扩展运算符，改用Array.from直接生成索引数组，这样不需要修改配置：

// 把原代码里的这行
[...Array(instanceRef.current.track.details.slides.length).keys()].map(...)

// 替换成
Array.from({ length: instanceRef.current.track.details.slides.length }, (_, idx) => idx).map(...)

修改后的完整组件代码：

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.from({ length: instanceRef.current.track.details.slides.length }, (_, idx) => (
            <button
              key={idx}
              onClick={() => {
                instanceRef.current?.moveToIdx(idx)
              }}
              className={`dot${currentSlide === idx ? ' active' : ''}`}
            ></button>
          ))}
        </div>
      )}
    </>
  )
}

补充说明 #

Array.from({ length: N }, (_, i) => i)会直接生成一个从0到N-1的数组，和原JS写法的效果完全一致，但更符合TypeScript的类型检查规则，不需要依赖迭代器的扩展支持。

内容的提问来源于stack exchange，提问作者Ton Almeida