使用react-error-boundary实现ErrorBoundary时，error隐式具有any类型

你遇到的Binding element 'error' implicitly has an 'any' type错误，核心原因是TypeScript无法自动推断Fallback组件props的完整类型，单独给error指定Error类型没用，因为没给整个props对象做明确的类型约束。

直接用react-error-boundary库提供的专属类型就能解决：

1. 从库中导入FallbackProps类型
2. 给Fallback组件的props参数指定该类型

修改后的代码如下：

import React from 'react'; 
import { ErrorBoundary, FallbackProps } from "react-error-boundary";

function Fallback({ error }: FallbackProps) {
  return (
    <div role='alert'>
      <p>Something went wrong:</p>
      <pre style={{ color: 'red' }}>{error.message}</pre>
    </div>
  );
}

const App = () => {
return (
  <ErrorBoundary FallbackComponent={Fallback} 
  onReset={(details) => {console.log(details);}}>
    <ExapleComponent/>
  </ErrorBoundary>
  )
}

如果onReset的details也出现类型报错，同样可以给它指定明确类型：

onReset={(details: { resetErrorBoundary: () => void }) => {
  console.log(details);
}}

这样就能彻底解决TypeScript的类型推断问题。

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