0Pricing
TypeScript Academy · Lección

Tipos de Suspense y límites de error

Utilice React.Suspense con componentes lazy y tipifique robustos límites de error Error Boundary basados en clases. Gestione errores unknown de forma segura y proporcione patrones de restablecimiento.

Tipos de Suspense y límites de error es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 2 de 2. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de TypeScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de TypeScript Academy incluye 2 lecciones en total.

Introducción

Objetivo: Cargue componentes de forma diferida con React.lazy + Suspense y añada un Error Boundary tipado que muestre un fallback comprensible y registre los detalles.

  • Suspense = interfaz de carga
  • Error Boundary = interfaz para errores en tiempo de ejecución
  • Tipar de forma segura los errores unknown

Lazy y Suspense

React.lazy devuelve un tipo de componente. Envuélvalo en Suspense para mostrar un fallback mientras se carga su módulo.

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

Tipado de props diferidas

Las props se infieren a partir de la exportación predeterminada del módulo importado. El lugar de llamada sigue estando completamente 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>
  )
}

Tipado de ErrorBoundary

Tipa los controladores de errores con unknown y restrínjalos a Error si es necesario. Use React.ErrorInfo para acceder a la pila 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
  }
}

Combinar boundaries

Combine Suspense (carga) y Error Boundary (errores). Resuelven problemas distintos y pueden anidarse por sección.

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

Patrones de restablecimiento

Consejos para restablecer:

  • Restablezca ErrorBoundary cambiando su key.
  • Ofrezca un botón “Volver a intentar” para volver a obtener los datos o montar el componente de nuevo.
  • Mantenga los fallbacks pequeños y accesibles.

Comprobación del tipado de boundaries

Comprobación rápida: ¿cómo se capturan los errores durante el renderizado con un fallback tipado?

Resumen

Resumen: Suspense gestiona la carga; los Error Boundaries gestionan los errores. Tipe cuidadosamente los errores unknown y proporcione estrategias de restablecimiento.

Preguntas frecuentes

¿La lección «Tipos de Suspense y límites de error» es gratis?

Sí — el texto completo de «Tipos de Suspense y límites de error» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de TypeScript Academy, actualiza a CoddyKit PRO. El curso de TypeScript Academy incluye 2 lecciones en total.

¿Qué aprenderé en «Tipos de Suspense y límites de error»?

Utilice React.Suspense con componentes lazy y tipifique robustos límites de error Error Boundary basados en clases. Gestione errores unknown de forma segura y proporcione patrones de restablecimiento. Practicas TypeScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar TypeScript Academy?

No se requiere experiencia previa. TypeScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 2.

¿Cuánto tiempo toma la lección «Tipos de Suspense y límites de error»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de TypeScript Academy?

Sí. Cada lección de TypeScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Hooks personalizados con genéricos e inferencia
  2. Tipos de Suspense y límites de error
← Volver a TypeScript Academy