TypeScript Academy · Ders

Suspense ve hata sınırlarının türleri

Tembel bileşenlerle React.Suspense kullanın ve sağlam Hata Sınırlarının (sınıf tabanlı) türlerini belirleyin. Bilinmeyen hataları güvenle işleyin ve sıfırlama kalıpları sunun.

Suspense ve hata sınırlarının türleri, CoddyKit'te ücretsiz bir TypeScript Academy dersidir. Bu, 2 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, TypeScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. TypeScript Academy kursu toplamda 2 dersten oluşur.

Giriş

Hedef: Bileşenleri React.lazy ve Suspense ile tembel olarak yükleyin ve kullanıcı dostu bir geri dönüş gösteren, ayrıntıları kaydeden türü belirlenmiş bir Hata sınırı ekleyin.

Suspense = yükleme arayüzü
Hata sınırı = çalışma zamanı hata arayüzü
bilinmeyen hataların türünü güvenli şekilde belirleme

Tembel yükleme ve Suspense

React.lazy bir bileşen türü döndürür. Modülü yüklenirken bir geri dönüş oluşturmak için onu Suspense ile sarın.

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

Tembel özelliklerin türünü belirleme

Özellikler, içe aktarılan modülün varsayılan dışa aktarımından çıkarılır. Çağrı yapılan yerin türleri bütünüyle belirlenmiş olarak kalır.

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 türünü belirleme

Hata işleyicilerinin türünü unknown ile belirleyin ve gerekirse Error türüne daraltın. Bileşen yığınına erişmek için React.ErrorInfo kullanın.

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

Sınırları birleştirme

Yükleme için Suspense ile hatalar için Hata sınırını birleştirin. Farklı sorumlulukları çözerler ve her bölüm için iç içe yerleştirilebilirler.

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

Sıfırlama desenleri

Sıfırlama ipuçları:

anahtarını değiştirerek ErrorBoundary'yi sıfırlayın.
Verileri yeniden getirmek veya bileşeni yeniden bağlamak için bir “Tekrar deneyin” düğmesi sunun.
Geri dönüşleri küçük ve erişilebilir tutun.

Sınır türleri kontrolü

Hızlı kontrol: Türü belirlenmiş bir geri dönüşle oluşturma zamanı hatalarını nasıl yakalarsınız?

Özet

Özet: Suspense yüklemeyi, Hata sınırları ise hataları yönetir. Bilinmeyen hataların türünü dikkatle belirleyin ve sıfırlama stratejileri sunun.

Sıkça Sorulan Sorular

“Suspense ve hata sınırlarının türleri” dersi ücretsiz mi?

Evet — “Suspense ve hata sınırlarının türleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve TypeScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. TypeScript Academy kursu toplamda 2 dersten oluşur.

“Suspense ve hata sınırlarının türleri” dersinde ne öğreneceğim?

Tembel bileşenlerle React.Suspense kullanın ve sağlam Hata Sınırlarının (sınıf tabanlı) türlerini belirleyin. Bilinmeyen hataları güvenle işleyin ve sıfırlama kalıpları sunun. TypeScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

TypeScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te TypeScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 2 dersinin 2. dersidir.

“Suspense ve hata sınırlarının türleri” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu TypeScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her TypeScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Geneller ve çıkarım içeren özel kancalar
Suspense ve hata sınırlarının türleri

← TypeScript Academy Sayfasına Dön