TypeScript Academy · Ders

Geneller ve çıkarım içeren özel kancalar

Değerler, sonuçlar ve hatalar için kullanan yeniden kullanılabilir özel kancalar yazın; güvenli API'ler için çıkarımdan ve kısıtlamalardan yararlanın.

Geneller ve çıkarım içeren özel kancalar, CoddyKit'te ücretsiz bir TypeScript Academy dersidir. Bu, 2 dersinin 1. 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: Yerel birer parça gibi hissettiren jenerik kancalar oluşturun: türü belirlenmiş bir localStorage kancası, asenkron bir yükleyici ve kontrollü/kontrolsüz bir yardımcı. Çağıranların türlere nadiren ek açıklama vermesi için tür çıkarımına güveneceksiniz.

React benzeri kullanım kolaylığı için demetler döndürme
Gerektiğinde kısıtlamaları kullanma
herhangi bir kullanmama

useLocalStorage<T>

useState gibi bir [value, set] demeti döndürün. T türünü değer ile ayarlayıcı arasında tutarlı tutun.

import { useEffect, useState } from "react"

export function useLocalStorage<T>(key: string, initial: T): [T, (v: T | ((prev: T) => T)) => void] {
  const [value, setValue] = useState<T>(() => {
    try {
      const raw = localStorage.getItem(key)
      return raw ? (JSON.parse(raw) as T) : initial
    } catch {
      return initial
    }
  })

  useEffect(() => {
    try { localStorage.setItem(key, JSON.stringify(value)) } catch {}
  }, [key, value])

  const set = (v: T | ((prev: T) => T)) => {
    setValue(prev => (typeof v === "function" ? (v as (p: T) => T)(prev) : v))
  }

  return [value, set]
}

// Usage
// const [user, setUser] = useLocalStorage("user", { id: 1, name: "Ada" })

useAsync<T>

değer, hata ve yükleniyor alanlarına sahip bir nesne döndürün. value türü, fn tarafından döndürülen Promise'ten çıkarılır.

import { useEffect, useState } from "react"

export function useAsync<T>(fn: () => Promise<T>, deps: unknown[] = []) {
  const [value, setValue] = useState<T | null>(null)
  const [error, setError] = useState<unknown>(null)
  const [loading, setLoading] = useState<boolean>(false)

  useEffect(() => {
    let cancelled = false
    setLoading(true)
    fn().then(
      (v) => { if (!cancelled) { setValue(v); setError(null) } },
      (e) => { if (!cancelled) { setError(e); setValue(null) } }
    ).finally(() => { if (!cancelled) setLoading(false) })
    return () => { cancelled = true }
  }, deps)

  return { value, error, loading }
}

// Usage
// const { value, error, loading } = useAsync(() => fetch("/api").then(r => r.json()))

useControlled<T>

Tek bir yardımcıyla hem kontrollü hem de kontrolsüz desenleri destekleyin. Demet, T türünü uyumlu tutar.

import { useState } from "react"

type ControlledProps<T> = {
  value?: T
  defaultValue: T
  onChange?: (v: T) => void
}

export function useControlled<T>({ value, defaultValue, onChange }: ControlledProps<T>): [T, (v: T) => void] {
  const [inner, setInner] = useState<T>(defaultValue)
  const isControlled = value !== undefined
  const current = isControlled ? (value as T) : inner
  const set = (v: T) => { isControlled ? onChange?.(v) : setInner(v) }
  return [current, set]
}

// Usage
// const [v, setV] = useControlled({ value, defaultValue: "", onChange: setValue })

Tür çıkarımı ve kısıtlamalar

Bağımsız değişkenlerden yapılan tür çıkarımını tercih edin; yalnızca kancanızın belirli alanlara ihtiyaç duyduğu durumlarda extends kısıtlamaları ekleyin.

// Inference works from the initial value
const [settings, setSettings] = useLocalStorage("settings", { theme: "dark", pageSize: 20 })
// T = { theme: string; pageSize: number }

// Constrain T when needed
interface WithId { id: string }
function useById<T extends WithId>(items: T[], id: string) {
  return items.find(x => x.id === id) || null
}

// Usage
const user = useById([{ id: "u1", name: "Ada" }], "u1")

İpuçları

İpuçları:

React hissi ve tutarlı tür tanımlaması için demetler döndürün.
Herkese açık kanca imzalarında asla any kullanmayın.
Kullanışlı durum geçişleri için (prev) => next biçimindeki güncelleyicileri kabul edin.

Kanca türleri kontrolü

Hızlı kontrol: Jenerik bir localStorage kancası için hangi imza en uygundur?

Özet

Özet: Tür çıkarımına dayanan, yalnızca gerektiğinde kısıtlamalar kullanan ve yerel React API'leri gibi hissettiren demet/nesne sonuçları sunan jenerik kancalar oluşturdunuz.

Sıkça Sorulan Sorular

“Geneller ve çıkarım içeren özel kancalar” dersi ücretsiz mi?

Evet — “Geneller ve çıkarım içeren özel kancalar” 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.

“Geneller ve çıkarım içeren özel kancalar” dersinde ne öğreneceğim?

Değerler, sonuçlar ve hatalar için kullanan yeniden kullanılabilir özel kancalar yazın; güvenli API'ler için çıkarımdan ve kısıtlamalardan yararlanın. 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 1. dersidir.

“Geneller ve çıkarım içeren özel kancalar” 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