0Pricing
TypeScript Academy · Урок

Типы Suspense и границ ошибок

Используйте React.Suspense с ленивыми компонентами и надёжно типизируйте Error Boundaries на основе классов. Безопасно обрабатывайте неизвестные ошибки и применяйте шаблоны сброса.

«Типы Suspense и границ ошибок» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 2 из 2. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 2 уроков всего.

Введение

Цель: лениво загружать компоненты с помощью React.lazy и Suspense, а также добавить типизированную границу ошибок, которая показывает понятный запасной интерфейс и записывает подробности в журнал.

  • Ожидание загрузки = интерфейс загрузки
  • Граница ошибок = интерфейс ошибки во время выполнения
  • Безопасно типизировать неизвестные ошибки

Ленивая загрузка и Suspense

React.lazy возвращает тип компонента. Оберните его в Suspense, чтобы отображать fallback во время загрузки модуля.

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

Типизация свойств ленивого компонента

Свойства выводятся из экспорта по умолчанию импортированного модуля. Место вызова остаётся полностью типизированным.

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

Типизация ErrorBoundary

Типизируйте обработчики ошибок с помощью unknown и при необходимости сужайте тип до Error. Используйте React.ErrorInfo для доступа к стеку компонентов.

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

Объединение границ

Объединяйте ожидание загрузки и границу ошибок. Они решают разные задачи и могут быть вложены для отдельных разделов.

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

Шаблоны сброса

Советы по сбросу:

  • Сбрасывайте ErrorBoundary, изменяя его ключ.
  • Предлагайте кнопку “Попробовать снова”, чтобы повторно загрузить данные или смонтировать компонент заново.
  • Делайте запасные интерфейсы небольшими и доступными.

Проверка типизации границ

Быстрая проверка: как перехватывать ошибки во время отрисовки с типизированным запасным интерфейсом?

Повторение

Повторение: Suspense обрабатывает загрузку, а границы ошибок — ошибки. Тщательно типизируйте неизвестные ошибки и предусмотрите стратегии сброса.

Часто задаваемые вопросы

Урок «Типы Suspense и границ ошибок» бесплатный?

Да — полный текст урока «Типы Suspense и границ ошибок» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 2 уроков всего.

Чему я научусь в уроке «Типы Suspense и границ ошибок»?

Используйте React.Suspense с ленивыми компонентами и надёжно типизируйте Error Boundaries на основе классов. Безопасно обрабатывайте неизвестные ошибки и применяйте шаблоны сброса. Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать TypeScript Academy?

Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 2.

Сколько времени занимает урок «Типы Suspense и границ ошибок»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке TypeScript Academy?

Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Пользовательские хуки с обобщениями и выводом типов
  2. Типы Suspense и границ ошибок
← Назад к TypeScript Academy