0Pricing
TypeScript Academy · Lekcja

Typy Suspense i granic błędów

Używanie React.Suspense z komponentami lazy oraz solidne typowanie Error Boundaries (opartych na klasach). Bezpieczna obsługa nieznanych błędów i wzorce resetowania

Typy Suspense i granic błędów to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 2 z 2. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej TypeScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs TypeScript Academy zawiera 2 lekcji w sumie.

Wprowadzenie

Cel: Leniwie ładować komponenty za pomocą React.lazy i Suspense oraz dodać typowany Error Boundary, który wyświetla przyjazny komunikat zastępczy i rejestruje szczegóły.

  • Suspense = interfejs ładowania
  • Error Boundary = interfejs błędu czasu wykonywania
  • Bezpieczne typowanie błędów typu unknown

Lazy i Suspense

React.lazy zwraca typ komponentu. Owiń go w Suspense, aby renderować fallback podczas ładowania modułu.

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

Typowanie propsów leniwie ładowanego komponentu

Propsy są wywnioskowywane z eksportu domyślnego importowanego modułu's. Miejsce wywołania pozostaje w pełni typowane.

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

Typowanie ErrorBoundary

Typuj handlery błędów za pomocą unknown i w razie potrzeby zawężaj typ do Error. Użyj React.ErrorInfo, aby uzyskać dostęp do stosu komponentów.

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

Łączenie granic

Połącz Suspense (ładowanie) i Error Boundary (błędy). Rozwiązują różne problemy i można je zagnieżdżać dla poszczególnych sekcji.

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

Wzorce resetowania

Wskazówki dotyczące resetowania:

  • Zresetuj ErrorBoundary, zmieniając jego key.
  • Udostępnij przycisk “Spróbuj ponownie”, aby ponownie pobrać dane lub zamontować komponent.
  • Niech komunikaty zastępcze będą krótkie i dostępne.

Sprawdzanie typowania granic

Szybkie sprawdzenie: jak przechwytywać błędy występujące podczas renderowania za pomocą typowanego komunikatu zastępczego?

Podsumowanie

Podsumowanie: Suspense obsługuje ładowanie, a Error Boundaries obsługują błędy. Ostrożnie typuj błędy typu unknown i zapewnij strategie resetowania.

Często zadawane pytania

Czy lekcja „Typy Suspense i granic błędów” jest bezpłatna?

Tak — pełny tekst „Typy Suspense i granic błędów” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu TypeScript Academy, przejdź na CoddyKit PRO. Kurs TypeScript Academy zawiera 2 lekcji w sumie.

Co nauczysz się w „Typy Suspense i granic błędów”?

Używanie React.Suspense z komponentami lazy oraz solidne typowanie Error Boundaries (opartych na klasach). Bezpieczna obsługa nieznanych błędów i wzorce resetowania Ćwiczysz TypeScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć TypeScript Academy?

Nie wymagamy żadnego doświadczenia. TypeScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 2.

Ile czasu zajmuje lekcja „Typy Suspense i granic błędów”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji TypeScript Academy?

Tak. Każda lekcja TypeScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Własne hooki z generykami i inferencją
  2. Typy Suspense i granic błędów
← Powrót do TypeScript Academy