TypeScript Academy · Oppitunti

Suspense- ja Error Boundary -tyypit

Oppitunti 2/28 vaihetta

Suspense- ja Error Boundary -tyypit on ilmainen TypeScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/2. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu TypeScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. TypeScript Academy-kurssilla on yhteensä 2 oppituntia.

Johdanto

Tavoite: Ladatkaa komponentteja viiveellä React.lazy- ja Suspense-toimintojen avulla ja lisätkää tyypitetty Error Boundary, joka näyttää ystävällisen varanäkymän ja kirjaa yksityiskohdat.

Suspense = latauksen käyttöliittymä
Error Boundary = ajonaikaisten virheiden käyttöliittymä
Tyypittäkää unknown-virheet turvallisesti

Lazy + Suspense

React.lazy palauttaa komponenttityypin. Sijoittakaa se Suspense-komponentin sisään, jotta sen moduulin lataamisen aikana renderöidään varanäkymä.

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

Lazyn propsien tyypitys

Propsit päätellään tuodun moduulin oletusviennistä. Kutsukohta säilyy täysin tyypitettynä.

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

ErrorBoundaryn tyypitys

Tyypittäkää virheenkäsittelijät unknown-tyypillä ja rajatkaa tyyppi tarvittaessa Error-tyyppiin. Käyttäkää React.ErrorInfo-tyyppiä komponenttipinon käyttämiseen.

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

Rajojen koostaminen

Yhdistäkää Suspense (lataus) ja Error Boundary (virheet). Ne ratkaisevat eri ongelmia, ja ne voidaan sijoittaa sisäkkäin osioittain.

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

Nollauskuviot

Nollausvinkit:

Nollatkaa ErrorBoundary vaihtamalla sen key-arvoa.
Tarjotkaa “Yritä uudelleen”-painike uutta hakua tai uudelleenliittämistä varten.
Pitäkää varanäkymät pieninä ja saavutettavina.

Boundaryn tyypityksen tarkistus

Pikatarkistus: Miten sieppaatte renderöinnin aikana syntyvät virheet tyypitetyn varanäkymän avulla?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Kertaus: Suspense käsittelee latauksen ja Error Boundaryt virheet. Tyypittäkää unknown-virheet huolellisesti ja tarjotkaa nollausstrategioita.

Aloita maksutta

Opi TypeScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 101
Oppitunnit: 352

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Suspense- ja Error Boundary -tyypit” ilmainen?

Kyllä – oppitunnin ”Suspense- ja Error Boundary -tyypit” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko TypeScript Academy-kurssin, päivitä CoddyKit PROhon. TypeScript Academy-kurssilla on yhteensä 2 oppituntia.

Mitä opin oppitunnilla ”Suspense- ja Error Boundary -tyypit”?

Käyttäkää React.Suspensea lazy-komponenttien kanssa ja tyypittäkää kestävät Error Boundaryt luokkapohjaisesti. Käsitelkää tuntemattomat virheet turvallisesti ja toteuttakaa palautusmalleja. Harjoittelet TypeScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni TypeScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin TypeScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/2.

Kuinka kauan ”Suspense- ja Error Boundary -tyypit”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä TypeScript Academy-oppitunnilla?

Kyllä. Jokainen TypeScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Geneeriset custom hookit ja päättely
Suspense- ja Error Boundary -tyypit

← Takaisin: TypeScript Academy