0Pricing
TypeScript Academy · Lektion

Typen für Suspense und Error Boundaries

Verwenden Sie React.Suspense mit Lazy-Komponenten und typisieren Sie robuste Error Boundaries (klassenbasiert). Behandeln Sie unbekannte Fehler sicher und stellen Sie Reset-Muster bereit.

Typen für Suspense und Error Boundaries ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 2. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 2 Lektionen.

Einführung

Ziel: Laden Sie Komponenten mit React.lazy + Suspense verzögert und fügen Sie eine typisierte Error Boundary hinzu, die einen verständlichen Fallback anzeigt und Details protokolliert.

  • Suspense = Ladeanzeige
  • Error Boundary = UI für Laufzeitfehler
  • Typisieren Sie unknown-Fehler sicher.

Lazy und Suspense

React.lazy gibt einen Komponententyp zurück. Umschließen Sie ihn mit Suspense, um während des Ladens seines Moduls einen Fallback zu rendern.

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

Typisierung von Lazy-Props

Props werden aus dem Default-Export des importierten Moduls abgeleitet. Die Aufrufstelle bleibt vollständig typisiert.

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

Typisierung der Error Boundary

Typisieren Sie Fehler-Handler mit unknown und schränken Sie bei Bedarf auf Error ein. Verwenden Sie React.ErrorInfo, um auf den Komponenten-Stack zuzugreifen.

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

Boundaries kombinieren

Kombinieren Sie Suspense (Ladevorgänge) und Error Boundary (Fehler). Sie behandeln unterschiedliche Anliegen und können je nach Abschnitt verschachtelt werden.

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

Muster zum Zurücksetzen

Tipps zum Zurücksetzen:

  • Setzen Sie die Error Boundary zurück, indem Sie ihren key ändern.
  • Bieten Sie eine Schaltfläche „Erneut versuchen“ an, um Daten erneut abzurufen oder die Komponente neu zu mounten.
  • Halten Sie Fallbacks klein und barrierefrei.

Prüfung der Boundary-Typisierung

Schnelltest: Wie fangen Sie Renderzeitfehler mit einem typisierten Fallback ab?

Zusammenfassung

Zusammenfassung: Suspense behandelt Ladevorgänge; Error Boundaries behandeln Fehler. Typisieren Sie unbekannte Fehler sorgfältig und stellen Sie Strategien zum Zurücksetzen bereit.

Häufig gestellte Fragen

Ist die Lektion „Typen für Suspense und Error Boundaries“ kostenlos?

Ja — der vollständige Text von „Typen für Suspense und Error Boundaries“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des TypeScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der TypeScript Academy-Kurs umfasst insgesamt 2 Lektionen.

Was lerne ich in „Typen für Suspense und Error Boundaries“?

Verwenden Sie React.Suspense mit Lazy-Komponenten und typisieren Sie robuste Error Boundaries (klassenbasiert). Behandeln Sie unbekannte Fehler sicher und stellen Sie Reset-Muster bereit. Du übst TypeScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um TypeScript Academy zu starten?

Keine Vorkenntnisse erforderlich. TypeScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 2.

Wie lange dauert die Lektion „Typen für Suspense und Error Boundaries“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser TypeScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede TypeScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Eigene Hooks mit Generics und Inferenz
  2. Typen für Suspense und Error Boundaries
← Zurück zu TypeScript Academy