TypeScript React自定义Hook用interface声明参数提示参数数量错误如何解决

报错原因 #

该报错和文件后缀无关，核心问题是你定义useSideButtons时使用了对象解构作为唯一入参，即这个Hook只接受1个包含changePage、setThisPage属性的对象，但调用时传入了2个独立参数，参数数量不匹配触发报错。

调整方案（两种可选，均保留类型声明提升可读性） #

方案1：保持Interface定义，仅调整调用代码

这种方案入参语义更清晰，后续扩展参数无需调整顺序，更推荐：

// index.tsx 修改调用逻辑，将两个参数包裹为对象传入
const { goNext, goBack } = useSideButtons({ changePage, setThisPage })

方案2：不修改调用逻辑，调整Hook的参数类型定义

如果不想改动现有调用代码，可以用元组类型定义参数列表，同样能实现类型统一声明：

// useSideButtons.tsx 调整后的完整代码
import { useEffect, SetStateAction } from 'react'

// 用元组定义参数列表类型
type SideButtonsParams = [
  changePage: (newNumber?: number) => void,
  setThisPage: (value: SetStateAction<number>) => void
]

interface ISideExports {
  goNext: () => void
  goBack: () => void
}

export default function useSideButtons (...[changePage, setThisPage]: SideButtonsParams): ISideExports {
  useEffect(changePage, [])

  const goNext = (): void => {
    setThisPage((actual) => {
      const newNumber = actual + 1
      localStorage.setItem('instandaThisPage', String(newNumber))
      return newNumber
    })
  }

  const goBack = (): void => {
    setThisPage(actual => {
      if (actual > 1) {
        const newNumber = actual - 1
        changePage(newNumber)
        localStorage.setItem('instandaThisPage', String(newNumber))
        return newNumber
      } else {
        return 1
      }
    })
  }

  return { goNext, goBack }
}

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