TypeScript Academy · 课时

Suspense 与错误边界类型

将 React.Suspense 与懒加载组件结合使用，并为错误边界指定稳健的类型（基于类）。安全处理未知错误，并提供重置模式。

Suspense 与错误边界类型 是 CoddyKit 上的免费 TypeScript Academy 课时。这是第 2 节课，共 2 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 TypeScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 TypeScript Academy 课程共包含 2 节课。

入门

目标：使用 React.lazy 和 Suspense 延迟加载组件，并添加带类型的错误边界，以显示友好的 fallback 并记录详细信息。

Suspense = 加载界面
错误边界 = 运行时错误界面
安全地处理 unknown 类型的错误

延迟加载与 Suspense

React.lazy 会返回组件类型。将它包裹在 Suspense 中，就能在模块加载期间渲染 fallback。

import React, { Suspense } from "react"

const LazyWidget = React.lazy(async () => import("./Widget"))

export default function App() {
  return (
    <div style={{ display: "grid", gap: 8 }}>
      <Suspense fallback={<span>Loading…</span>}>
        <LazyWidget />
      </Suspense>
    </div>
  )
}

延迟加载属性类型

属性会根据导入模块的默认导出进行推断。调用处仍然拥有完整的类型支持。

import React, { Suspense } from "react"

// Ensure props are preserved through lazy
interface ChartProps { title: string; values: number[] }
const Chart = React.lazy(async () => import("./Chart"))

export default function App() {
  return (
    <Suspense fallback={<span>Loading chart…</span>}>
      <Chart title="Sales" values={[10, 20, 15]} />
    </Suspense>
  )
}

ErrorBoundary 类型

将错误处理程序的参数类型设为 unknown，并在需要时收窄为 Error。使用 React.ErrorInfo 访问组件堆栈。

import React from "react"

interface Props { fallback: React.ReactNode }
interface State { hasError: boolean; message?: string }

export class ErrorBoundary extends React.Component<Props, State> {
  state: State = { hasError: false }

  static getDerivedStateFromError(err: unknown): State {
    const msg = err instanceof Error ? err.message : String(err)
    return { hasError: true, message: msg }
  }

  componentDidCatch(error: unknown, info: React.ErrorInfo) {
    // log error & component stack safely
    console.error("ErrorBoundary", error, info.componentStack)
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback || <span>Something went wrong</span>
    }
    return this.props.children
  }
}

组合边界

组合 Suspense（加载）和错误边界（错误）。它们负责不同的问题，可以按区域嵌套。

import React, { Suspense } from "react"
import { ErrorBoundary } from "./ErrorBoundary"

const Page = React.lazy(async () => import("./Page"))

export default function App() {
  return (
    <div style={{ display: "grid", gap: 8 }}>
      <ErrorBoundary fallback={<span>Failed to load page</span>}>
        <Suspense fallback={<span>Loading page…</span>}>
          <Page />
        </Suspense>
      </ErrorBoundary>
    </div>
  )
}

重置模式

重置提示：

更改键即可重置 ErrorBoundary。
提供““再试一次””按钮，以重新获取数据或重新挂载组件。
让 fallback 保持简洁且易于访问。

边界类型检查

快速检查：如何使用带类型的 fallback 捕获渲染时错误？

回顾

回顾：Suspense 负责处理加载；错误边界负责处理错误。请谨慎为 unknown 类型的错误指定类型，并提供重置策略。

常见问题解答

「Suspense 与错误边界类型」课时是免费的吗？

是的 — 「Suspense 与错误边界类型」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 TypeScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 2 节课。

「Suspense 与错误边界类型」这节课中我会学到什么？

将 React.Suspense 与懒加载组件结合使用，并为错误边界指定稳健的类型（基于类）。安全处理未知错误，并提供重置模式。你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 TypeScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 2 节。

「Suspense 与错误边界类型」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 TypeScript Academy 课中编写并运行代码吗？

能。每节 TypeScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

带泛型与类型推断的自定义钩子
Suspense 与错误边界类型

← 返回 TypeScript Academy