reactjs - 如何在 Typescript 中正确键入 React ErrorBoundary 类组件？

Question

这是我目前关于如何正确键入 React ErrorBoundary 的尝试Typescript 中的类组件:

import React from "react";
import ErrorPage from "./ErrorPage";
import type { Store } from "redux";   // I'M PASSING THE REDUX STORE AS A CUSTOM PROP

interface Props {
  store: Store         // THIS IS A CUSTOM PROP THAT I'M PASSING
}

interface State {      // IS THIS THE CORRECT TYPE FOR THE state ?
  hasError: boolean
}

class ErrorBoundary extends React.Component<Props,State> {
  
  constructor(props: Props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error): State {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo: React.ErrorInfo): void {
    // You can also log the error to an error reporting service
    // logErrorToMyService(error, errorInfo);
    console.log("error: " + error);
    console.log("errorInfo: " + JSON.stringify(errorInfo));
    console.log("componentStack: " + errorInfo.componentStack);
  }

  render(): React.ReactNode {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return(
        <ErrorPage
          message={"Something went wrong..."}
        />
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

这个问题是关于这个 ErrorBoundary 的类型。类组件。我将它分成几部分以使其更容易。

A 部分: Prop 和状态的类型
我做的对吗？

interface Props {
  store: Store         // THIS IS A CUSTOM PROP THAT I'M PASSING
}

interface State {      // IS THIS THE CORRECT TYPE FOR THE state ?
  hasError: boolean
}

class ErrorBoundary extends React.Component<Props,State> {}

B 部分:getDerivedStateFromError(错误) error应该选择什么类型范围？返回类型应该是 State类型，对吧？

static getDerivedStateFromError(error): State {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

C部分:componentDidCatch(错误，errorInfo:React.React.ErrorInfo) error应该选择什么类型范围？对于 errorInfo , React 确实有一个 ErrorInfo似乎是正确的类型。是吗？返回类型应为 void ， 正确的？

componentDidCatch(error, errorInfo: React.ErrorInfo): void {
    console.log("error: " + error);
    console.log("errorInfo: " + JSON.stringify(errorInfo));
    console.log("componentStack: " + errorInfo.componentStack);
}

D 部分:render() 方法
返回类型是否应为 ReactNode ?

render(): React.ReactNode {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return(
        <ErrorPage
          message={"Something went wrong..."}
        />
      );
    }

    return this.props.children;
  }

Answer 1

您将在文件 index.d.ts 中获得所有答案来自 @types/react .如果您使用的是 VSCode 之类的 IDE，您可以按住 Ctrl 键并单击一个类型以直接转到其定义。
这是您问题的准确答案，但在此之前，让我建议您更喜欢使用 react hooks而不是类。

由 OP 编辑​​:我从不使用类组件，总是更喜欢函数和钩子(Hook)，但来自 React docs关于错误边界:

Error boundaries work like a JavaScript catch {} block, but for components. Only class components can be error boundaries.

我给出的行是来自 index.d.ts 的行。在版本 16.9.49 中。
A部分 : 是的，就是这样。
B部分 :正如您在第 658 行看到的那样， error是 any 类型并且返回类型是 state 的一部分或 null .
C部分 : 在第 641 行，您将看到错误的类型为 Error返回类型为 void .
D部分 :在第 494 行，您可以看到渲染应该返回 ReactNode …