0Pricing
TypeScript Academy · Aula

Tipos de Suspense e limites de erro

Use React.Suspense com componentes lazy e tipifique Error Boundaries robustos (baseados em classe). Trate erros desconhecidos com segurança e forneça padrões de redefinição.

Tipos de Suspense e limites de erro é uma aula grátis de TypeScript Academy no CoddyKit. Esta é a aula 2 de 2. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de TypeScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de TypeScript Academy inclui 2 aulas no total.

Introdução

Objetivo: carregue componentes sob demanda com React.lazy e Suspense e adicione um limite de erros tipado que mostre uma alternativa amigável e registre os detalhes.

  • Suspense = interface de carregamento
  • Limite de erros = interface para erros em tempo de execução
  • Tipifique erros desconhecidos com segurança

Carregamento sob demanda e Suspense

React.lazy retorna um tipo de componente. Envolva-o em Suspense para renderizar uma alternativa enquanto o módulo é carregado.

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

Tipagem das Props carregadas sob demanda

As Props são inferidas a partir da exportação padrão do módulo importado. O local da chamada permanece totalmente tipado.

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

Tipagem de ErrorBoundary

Tipifique os manipuladores de erro com unknown e restrinja para Error se necessário. Use React.ErrorInfo para acessar a pilha de componentes.

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

Combinação de limites

Combine Suspense (carregamento) e limites de erros (erros). Eles resolvem questões diferentes e podem ser aninhados por seção.

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

Padrões de redefinição

Dicas de redefinição:

  • Redefina o ErrorBoundary alterando sua chave.
  • Ofereça um botão “Tentar novamente” para buscar os dados novamente ou montar o componente outra vez.
  • Mantenha as alternativas pequenas e acessíveis.

Verificação da tipagem de limites

Verificação rápida: como capturar erros ocorridos durante a renderização com uma alternativa tipada?

Recapitulação

Recapitulação: Suspense gerencia o carregamento; os limites de erros gerenciam os erros. Tipifique cuidadosamente os erros desconhecidos e forneça estratégias de redefinição.

Perguntas Frequentes

A aula “Tipos de Suspense e limites de erro” é grátis?

Sim — o texto completo de “Tipos de Suspense e limites de erro” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de TypeScript Academy, atualize para CoddyKit PRO. O curso de TypeScript Academy inclui 2 aulas no total.

O que vou aprender em “Tipos de Suspense e limites de erro”?

Use React.Suspense com componentes lazy e tipifique Error Boundaries robustos (baseados em classe). Trate erros desconhecidos com segurança e forneça padrões de redefinição. Você pratica TypeScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar TypeScript Academy?

Nenhuma experiência prévia é necessária. TypeScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 2.

Quanto tempo leva a aula “Tipos de Suspense e limites de erro”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de TypeScript Academy?

Sim. Cada aula de TypeScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Hooks personalizados com genéricos e inferência
  2. Tipos de Suspense e limites de erro
← Voltar para TypeScript Academy