0Pricing
TypeScript Academy · Lezione

Tipi per Suspense ed error boundaries

Utilizzi React.Suspense con componenti lazy e tipizzi robusti Error Boundaries (basati su classi). Gestisca in sicurezza gli errori unknown e fornisca pattern di reset.

Tipi per Suspense ed error boundaries è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 2 di 2. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento TypeScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso TypeScript Academy include 2 lezioni in totale.

Introduzione

Obiettivo: caricare i componenti in modo lazy con React.lazy + Suspense e aggiungere un Error Boundary tipizzato che mostri un fallback comprensibile e registri i dettagli.

  • Suspense = interfaccia di caricamento
  • Error Boundary = interfaccia per gli errori a runtime
  • Tipizzare in sicurezza gli errori unknown

Lazy + Suspense

React.lazy restituisce un tipo di componente. Lo racchiuda in Suspense per eseguire il rendering di un fallback mentre il relativo modulo è in caricamento.

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

Tipizzazione delle props lazy

Le props vengono inferite dall'export predefinito del modulo importato. Il punto di chiamata resta completamente tipizzato.

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

Tipizzazione di ErrorBoundary

Tipizzi i gestori degli errori con unknown e restringa a Error se necessario. Utilizzi React.ErrorInfo per accedere allo stack del componente.

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

Composizione dei boundary

Combini Suspense (caricamento) e Error Boundary (errori). Risolvono problematiche diverse e possono essere annidati per sezione.

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

Pattern di reset

Suggerimenti per il reset:

  • Reimposti ErrorBoundary modificando la sua key.
  • Offra un pulsante “Riprova” per eseguire nuovamente il fetch o montare di nuovo il componente.
  • Mantenga i fallback brevi e accessibili.

Verifica della tipizzazione dei boundary

Verifica rapida: come si intercettano gli errori durante il rendering con un fallback tipizzato?

Riepilogo

Riepilogo: Suspense gestisce il caricamento, mentre gli Error Boundary gestiscono gli errori. Tipizzi con attenzione gli errori unknown e fornisca strategie di reset.

Domande Frequenti

La lezione «Tipi per Suspense ed error boundaries» è gratuita?

Sì — il testo completo di «Tipi per Suspense ed error boundaries» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso TypeScript Academy, passa a CoddyKit PRO. Il corso TypeScript Academy include 2 lezioni in totale.

Cosa imparerò in «Tipi per Suspense ed error boundaries»?

Utilizzi React.Suspense con componenti lazy e tipizzi robusti Error Boundaries (basati su classi). Gestisca in sicurezza gli errori unknown e fornisca pattern di reset. Eserciti TypeScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare TypeScript Academy?

Non è richiesta alcuna esperienza precedente. TypeScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 2.

Quanto tempo richiede la lezione «Tipi per Suspense ed error boundaries»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione TypeScript Academy?

Sì. Ogni lezione TypeScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Custom hook con generics e inferenza
  2. Tipi per Suspense ed error boundaries
← Torna a TypeScript Academy