React+TypeScript+ESLint如何强制useCallback参数带正确类型

方案1：调整TypeScript严格模式配置 #

在tsconfig.json中开启以下两个配置即可捕获这类隐式any问题：

{
  "compilerOptions": {
    "noImplicitAny": true,
    "strictFunctionTypes": true
  }
}

开启后如果useCallback的回调参数没有标注类型，TypeScript会直接抛出隐式any错误。

注：如果已经开启strict: true严格模式，这两个配置默认已启用，不需要额外配置。

方案2：重写useCallback类型约束（更严格的全局兜底） #

如果希望从类型定义层面杜绝默认any的问题，可以在项目中新增类型声明文件覆盖@types/react的默认定义：

// src/@types/react.d.ts
import 'react';

declare module 'react' {
  // 将默认的参数/返回值any改成unknown
  function useCallback<T extends (...args: unknown[]) => unknown>(
    callback: T,
    deps: DependencyList
  ): T;
}

修改后未标注类型的参数会被推导为unknown，后续直接使用时TypeScript会抛出类型错误。

方案3：通过ESLint规则强制校验 #

如果需要更灵活的校验规则（比如只限制useCallback的参数类型，不全局要求所有函数加标注），可以通过ESLint的no-restricted-syntax规则自定义校验逻辑：

// .eslintrc.json
{
  "rules": {
    "no-restricted-syntax": [
      "error",
      {
        "selector": "CallExpression[callee.property.name='useCallback'] > ArrowFunctionExpression > Identifier.params:not([typeAnnotation])",
        "message": "useCallback回调参数必须添加显式类型标注"
      },
      {
        "selector": "CallExpression[callee.name='useCallback'] > ArrowFunctionExpression > Identifier.params:not([typeAnnotation])",
        "message": "useCallback回调参数必须添加显式类型标注"
      }
    ]
  }
}

如果可以接受全局要求所有函数参数都加类型标注，也可以直接开启@typescript-eslint/no-untyped-parameters规则，自然会覆盖useCallback的场景。

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