Как правильно ввести компонент класса React ErrorBoundary в Typescript?

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: Типы для реквизита и состояния

Что я делаю правильно?

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> {}

---

ЧАСТЬ Б: 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. Если вы используете IDE, такую ​​как VSCode, вы можете Ctrl+ щелкнуть по типу, чтобы напрямую перейти к его определению.

Вот точные ответы на ваши вопросы, но прежде позвольте мне посоветовать вам предпочесть реакцию hooks вместо классов.

---

РЕДАКТИРОВАТЬ с помощью OP: я никогда не использую компоненты класса, всегда предпочитаю функции и хуки, но из документов React по границам ошибок:

Границы ошибок работают как блок catch {} в JavaScript, но для компонентов. Границами ошибки могут быть только компоненты класса.

---

Строки, которые я даю, - это одна из index.d.ts в версии 16.9.49.

Часть A: да, это способ сделать.

Часть B: как вы можете видеть в строке 658, error относится к типу any а возвращаемый тип является частью state или же null.

Часть C: в строке 641 вы увидите, что ошибка имеет тип Error и тип возврата void.

Часть D: в строке 494 вы можете видеть, что рендер должен возвращать 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;