如何在TypeScript中为react-paginate设置回调函数prop并解决类型报错

你遇到的TS7006报错是因为TypeScript开启了noImplicitAny校验规则，你定义的onPageChange回调的selected参数没有显式声明类型，被TS推断为隐式any类型触发了校验，可通过以下两种方案解决：

方案1：直接手动声明参数类型 #

根据组件给出的onPageChange类型定义，直接给参数标注类型即可：

const onPageChange = (selected: { selected: number }): void => {
  // 取当前选中的页码直接调用 selected.selected 即可
  console.log(selected.selected);
}

方案2：从组件包导入预设类型（更推荐） #

直接复用react-paginate官方导出的类型定义，避免手动写类型出错，后续组件版本升级也能自动同步类型：

1. 先导入组件的类型定义：

import type { ReactPaginateProps } from 'react-paginate';

2. 给回调函数直接绑定对应类型：

const onPageChange: ReactPaginateProps['onPageChange'] = (selected) => {
  // 此时selected的类型会被自动推断，无需手动标注
  console.log(selected.selected);
}

内容的提问来源于stack exchange，提问作者Martin Rützy