TypeScript环境更新React state时prev参数隐式any类型错误如何解决

报错原因 #

TypeScript 开启noImplicitAny规则后，会要求所有变量/参数都有明确的类型，你在setMoviesPage的更新回调中没有声明prev的类型，TS无法自动推导时就会抛出该隐式any类型错误。

解决方案 #

提供两种可行的修复方案： #

方案1：给回调参数显式加类型注解

直接在prev参数后声明类型为number，即可快速修复：

setMoviesPage((prev: number) => prev + 1);

方案2：给useState添加泛型约束（更推荐）

在定义状态时就通过泛型指定类型，后续所有调用setMoviesPage的回调都会自动推导参数类型，不需要重复加注解，更符合TS项目的开发规范：

// 定义状态时添加<number>泛型
const [moviesPage, setMoviesPage] = useState<number>(1);

async function handleScroll() {
  if (window.innerHeight + document.documentElement.scrollTop !== document.documentElement.offsetHeight) return;
  // 额外提示：React状态更新函数返回值不是Promise，这里的await可以删除
  setIsFetching(true);
  // TS会自动识别prev是number类型，不需要额外加注解
  setMoviesPage(prev => prev + 1);
}

两种方案都可以解决该报错，推荐优先使用方案2。

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