PricingLoginStart free
TypeScript Academy · Lektion

Typer för Suspense och error boundaries

Använd React.Suspense med lazy-komponenter och typa robusta Error Boundaries (klassbaserade). Hantera okända fel säkert och tillhandahåll mönster för återställning.

Lektion 2 av 28 steg

Typer för Suspense och error boundaries är en gratis lektion i TypeScript Academy på CoddyKit. Detta är lektion 2 av 2. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för TypeScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i TypeScript Academy innehåller totalt 2 lektioner.

Introduktion

Mål: Ladda komponenter lazy med React.lazy och Suspense, och lägg till en typad Error Boundary som visar en vänlig reservvy och loggar detaljer.

  • Suspense = laddningsgränssnitt
  • Error Boundary = gränssnitt för runtime-fel
  • Typa unknown-fel på ett säkert sätt

Lazy och Suspense

React.lazy returnerar en komponenttyp. Omslut den med Suspense för att rendera en fallback medan modulen laddas.

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

Typning av lazy-props

Props härleds från det importerade modulens standardexport via 'default export'. Anropsstället förblir fullt typat.

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

Typning av ErrorBoundary

Typa felhanterare med unknown och gör typen smalare till Error vid behov. Använd React.ErrorInfo för att komma åt komponentstacken.

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

Kombinera gränser

Kombinera Suspense (laddning) och Error Boundary (fel). De hanterar olika ansvarsområden och kan kapslas per sektion.

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

Mönster för återställning

Tips för återställning:

  • Återställ ErrorBoundary genom att ändra dess key.
  • Erbjud en “Försök igen”-knapp för att hämta data på nytt eller montera om komponenten.
  • Håll reservvyer små och tillgängliga.

Kontroll av boundary-typning

Snabb kontroll: Hur fångar du fel vid rendering med en typad reservvy?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Sammanfattning: Suspense hanterar laddning och Error Boundaries hanterar fel. Typa unknown-fel noggrant och tillhandahåll strategier för återställning.

Gratis att börja

Lär dig TypeScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser
101
Lektioner
352
Börja lära dig gratisVisa hela kursen

Vanliga frågor

Är lektionen ”Typer för Suspense och error boundaries” gratis?

Ja – hela texten till ”Typer för Suspense och error boundaries” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i TypeScript Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i TypeScript Academy innehåller totalt 2 lektioner.

Vad lär jag mig i ”Typer för Suspense och error boundaries”?

Använd React.Suspense med lazy-komponenter och typa robusta Error Boundaries (klassbaserade). Hantera okända fel säkert och tillhandahåll mönster för återställning. Ni övar på TypeScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig TypeScript Academy?

Du behöver inga förkunskaper. Utbildningen i TypeScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 2.

Hur lång tid tar lektionen ”Typer för Suspense och error boundaries”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här TypeScript Academy-lektionen?

Ja. Varje TypeScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

  1. Anpassade hooks med generics och inferens
  2. Typer för Suspense och error boundaries
← Tillbaka till TypeScript Academy