如何在 Typescript 中正确键入 React ErrorBoundary class 组件？

Question

这是我目前关于如何在 Typescript 中正确输入 React ErrorBoundary class 组件的尝试：

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 class 组件的类型的。我将它分成几个部分以使其更容易。

A 部分：道具和状态的类型

我这样做对吗？

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 参数选择什么类型？ return类型应该是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 类型。是吗？ return 类型应该是 void，正确吗？

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

D 部分：render() 方法

return 类型应该是 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

您将从 @types/react 的 index.d.ts 文件中获得所有答案。如果您使用的 IDE 类似于 VSCode，您可以按住 Ctrl 并单击一个类型以直接转到其定义。

这里是您问题的准确答案，但在此之前，让我建议您更喜欢使用 React hooks 而不是 classes。

OP 编辑： 我从不使用 class 组件，总是更喜欢函数和挂钩，但是来自 React docs 关于错误边界：

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

我给出的行是来自版本 16.9.49 中 index.d.ts 的行。

A 部分：是的，就是这样。

B部分：在第658行可以看到，error是any类型，return类型是partial state 或 null.

的

C部分：在第641行，你会看到错误的类型是Error，return的类型是void。

D部分：在第494行，你可以看到渲染应该return一个ReactNode…

Answer 2

您可以使用以下代码作为错误边界：

import React, { Component, ErrorInfo, ReactNode } from "react";

interface Props {
  children: ReactNode;
}

interface State {
  hasError: boolean;
}

class ErrorBoundary extends Component<Props, State> {
  public state: State = {
    hasError: false
  };

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

  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error("Uncaught error:", error, errorInfo);
  }

  public render() {
    if (this.state.hasError) {
      return <h1>Sorry.. there was an error</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

如何在 Typescript 中正确键入 React ErrorBoundary class 组件？

How to properly type a React ErrorBoundary class component in Typescript?

reactjs

typescript

typescript-typings

react-class-based-component

react-error-boundary