React组件onClick绑定this时报Parameter 'this' implicitly has an 'any' type错误

错误原因 #

• 你定义的handleUpdatePermissionClick是箭头函数，箭头函数的this在定义时就绑定了上层作用域的this，本身不支持通过bind方法重新绑定，bind操作完全多余。
• TypeScript 无法推导bind时传入的this的类型，同时你直接在bind参数内给this加类型注解的写法不符合 TypeScript 语法规范，触发双重报错。

解决方案1（推荐）：删除bind，用匿名函数包裹传参 #

这是 React 事件处理传递自定义参数的标准写法，完全避开this相关的类型问题：

const handleUpdatePermissionClick = async (user: UserPermission) => {
  try {
    await updateUserPermission(user)
    setShowError(false)
  } catch (e) {
    setShowError(true)
  }
}

<MenuItem
  name={ele.name}
  key={ele.name}
  onClick={() => handleUpdatePermissionClick({ permission: ele, userId })}
/>

解决方案2（不推荐，仅用于兼容旧写法）：把箭头函数改为普通函数，显式声明this类型 #

如果你一定要用bind传参，可以修改函数定义为普通函数，显式声明this的类型（如果不需要用到this就声明为void即可），bind时第一个参数传入null：

// 普通函数声明，显式指定this类型为void表示函数内部不使用this
const handleUpdatePermissionClick = async function(this: void, user: UserPermission) {
  try {
    await updateUserPermission(user)
    setShowError(false)
  } catch (e) {
    setShowError(true)
  }
}

<MenuItem
  name={ele.name}
  key={ele.name}
  onClick={handleUpdatePermissionClick.bind(null, { permission: ele, userId })}
/>

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