0Pricing
TypeScript Academy · Lektion

Eigene Hooks mit Generics und Inferenz

Schreiben Sie wiederverwendbare eigene Hooks mit für Werte, Ergebnisse und Fehler und nutzen Sie Inferenz und Constraints für sichere APIs.

Eigene Hooks mit Generics und Inferenz ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 2. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 2 Lektionen.

Einführung

Ziel: Erstellen Sie generische Hooks, die sich wie native Hooks anfühlen: einen typisierten localStorage-Hook, einen Async-Loader sowie eine Hilfe für kontrollierte und unkontrollierte Komponenten. Sie verlassen sich auf Inferenz, sodass Aufrufende nur selten Typen angeben müssen.

  • Geben Sie für eine React-ähnliche Ergonomie Tupel zurück.
  • Verwenden Sie bei Bedarf Einschränkungen.
  • Verwenden Sie kein any.

useLocalStorage<T>

Geben Sie wie bei useState ein [value, set]-Tupel zurück. Halten Sie T für Value und Setter konsistent.

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>

Geben Sie ein Objekt mit value, error und loading zurück. Der Typ von value wird aus dem von fn zurückgegebenen Promise abgeleitet.

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>

Unterstützen Sie mit einer einzigen Hilfe sowohl kontrollierte als auch unkontrollierte Muster. Das Tupel hält T konsistent.

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

Inferenz und Einschränkungen

Bevorzugen Sie die Inferenz aus Argumenten; fügen Sie Einschränkungen mit extends nur hinzu, wenn Ihr Hook bestimmte Felder benötigt.

// 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")

Tipps

Tipps:

  • Geben Sie Tupel zurück, um das React-Gefühl und eine konsistente Typisierung zu erhalten.
  • Verwenden Sie niemals any in öffentlichen Hook-Signaturen.
  • Akzeptieren Sie Updater (prev) => next für ergonomische Zustandsübergänge.

Prüfung der Hook-Typisierung

Schnelltest: Welche Signatur passt am besten zu einem generischen localStorage-Hook?

Zusammenfassung

Zusammenfassung: Sie haben generische Hooks erstellt, die sich auf Inferenz verlassen, Einschränkungen nur bei Bedarf verwenden und Tupel- oder Objektergebnisse bereitstellen, die sich wie native React-APIs anfühlen.

Häufig gestellte Fragen

Ist die Lektion „Eigene Hooks mit Generics und Inferenz“ kostenlos?

Ja — der vollständige Text von „Eigene Hooks mit Generics und Inferenz“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des TypeScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der TypeScript Academy-Kurs umfasst insgesamt 2 Lektionen.

Was lerne ich in „Eigene Hooks mit Generics und Inferenz“?

Schreiben Sie wiederverwendbare eigene Hooks mit für Werte, Ergebnisse und Fehler und nutzen Sie Inferenz und Constraints für sichere APIs. Du übst TypeScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um TypeScript Academy zu starten?

Keine Vorkenntnisse erforderlich. TypeScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 2.

Wie lange dauert die Lektion „Eigene Hooks mit Generics und Inferenz“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser TypeScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede TypeScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Eigene Hooks mit Generics und Inferenz
  2. Typen für Suspense und Error Boundaries
← Zurück zu TypeScript Academy