如何在auth.tsx文件中使用TypeScript解决参数隐式any类型报错

错误原因 #

TypeScript 配置开启了 noImplicitAny 规则，未显式声明类型的参数会被判定为隐式any类型，触发编译报错。 #

修复步骤 #

1. 给请求入参添加基础类型注解 #

你代码中的uid、token、new_password、re_new_password均为字符串类型，直接添加:string类型注解即可。

2. 给dispatch参数添加类型注解 #

dispatch是Redux的动作派发函数，根据你使用的Redux版本选择对应类型：

• 若使用@reduxjs/toolkit：从store配置文件中导入项目全局定义的AppDispatch类型（配置store时默认生成）
• 若使用原生Redux：从redux包导入Dispatch类型

完整修复后代码示例 #

// 导入对应依赖，注意替换为你项目实际的store路径
import { AppDispatch } from '../store';
import axios from 'axios';

// 假设你已经提前定义了这两个action类型常量
const PASSWORD_RESET_CONFIRM_SUCCESS = 'PASSWORD_RESET_CONFIRM_SUCCESS';
const PASSWORD_RESET_CONFIRM_FAIL = 'PASSWORD_RESET_CONFIRM_FAIL';

export const reset_password_confirm = (
  uid: string,
  token: string,
  new_password: string,
  re_new_password: string
) => async (dispatch: AppDispatch) => {
    const config = {
        headers: {
            'Content-Type': 'application/json'
        }
    };

    const body = JSON.stringify({ uid, token, new_password, re_new_password });

    try {
        await axios.post(`${process.env.REACT_APP_API_URL}/auth/users/reset_password_confirm/`, body, config);

        dispatch({
            type: PASSWORD_RESET_CONFIRM_SUCCESS
        });
    } catch (err) {
        dispatch({
            type: PASSWORD_RESET_CONFIRM_FAIL
        });
    }
};

进阶优化建议 #

如果多个请求函数用到重复的参数类型，可以抽离为公共类型复用：

// 可抽离到单独的types/auth.ts文件统一管理
type ResetPasswordConfirmParams = {
  uid: string;
  token: string;
  new_password: string;
  re_new_password: string;
}

// 函数入参可简化为解构赋值+类型注解
export const reset_password_confirm = (
  { uid, token, new_password, re_new_password }: ResetPasswordConfirmParams
) => async (dispatch: AppDispatch) => {
  // 原有业务逻辑
}

注意事项 #

不推荐通过修改tsconfig.json中noImplicitAny: false的方式规避报错，会失去TypeScript类型检查的核心价值。

内容的提问来源于stack exchange，提问作者Yusuf Doğan