React Academy · Lektion

Context und Custom Hooks typisieren

Erstellen Sie typisierten Context mit Standardwerten und schreiben Sie Custom Hooks mit expliziten Rückgabetypen.

Lektion 4 von 413 Schritte

Context und Custom Hooks typisieren ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. 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 React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Typisierter Context mit createContext

Übergeben Sie den Context-Typ und einen Standardwert an createContext. Verwenden Sie null als Standardwert, wenn der Context innerhalb eines Providers verwendet werden muss, und behandeln Sie diesen Fall mit einer Guard.

interface AuthContextType {
  user: User | null;
  login: (credentials: Credentials) => Promise<void>;
  logout: () => void;
}

const AuthContext = createContext<AuthContextType | null>(null);

Das Guard-Hook-Muster

Erstellen Sie einen benutzerdefinierten Hook, der den Context ausliest und einen Fehler auslöst, wenn er außerhalb seines Providers verwendet wird. Dadurch entfallen Nullprüfungen an jeder Aufrufstelle.

export function useAuth(): AuthContextType {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('useAuth must be used within AuthProvider');
  return ctx;
}

Den Provider typisieren

Die Provider-Komponente umschließt die untergeordneten Elemente und stellt den Context-Wert bereit. Typisieren Sie das Wertobjekt explizit, damit TypeScript überprüft, ob es dem Context-Typ entspricht.

export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null);

  const login = async (creds: Credentials) => {
    const u = await apiLogin(creds);
    setUser(u);
  };

  const logout = () => setUser(null);

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

Context mit Standardwert

Wenn ein sinnvoller Standardwert vorhanden ist (z. B. ein Theme), übergeben Sie ihn direkt an createContext, damit der Context nie null ist und kein Guard-Hook benötigt wird.

interface ThemeContextType { theme: 'light' | 'dark'; toggle: () => void; }

const ThemeContext = createContext<ThemeContextType>({
  theme: 'light',
  toggle: () => {},
});

export const useTheme = () => useContext(ThemeContext);

Rückgabewerte benutzerdefinierter Hooks typisieren

Geben Sie den Rückgabetyp benutzerdefinierter Hooks explizit an oder lassen Sie ihn von TypeScript ableiten. Explizite Typen dienen als Dokumentation und verhindern unbeabsichtigte Änderungen an der Form.

interface UseCounterReturn {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
}

function useCounter(initial = 0): UseCounterReturn {
  const [count, setCount] = useState(initial);
  return {
    count,
    increment: () => setCount(c => c + 1),
    decrement: () => setCount(c => c - 1),
    reset: () => setCount(initial),
  };
}

Tuple-Rückgabetypen

Hooks, die ein Paar zurückgeben (wie useState), verwenden Tuples. Typisieren Sie sie mit as const oder einem expliziten Tuple-Typ, damit die Destrukturierung korrekt abgeleitet wird.

function useToggle(initial = false): [boolean, () => void] {
  const [value, setValue] = useState(initial);
  const toggle = useCallback(() => setValue(v => !v), []);
  return [value, toggle];
}

// Destructuring correctly infers types:
const [isOpen, toggleOpen] = useToggle();

Generische benutzerdefinierte Hooks

Auch benutzerdefinierte Hooks können generisch sein. Ein generischer useLocalStorage-Hook speichert jeden serialisierbaren Typ mit vollständiger Typsicherheit.

function useLocalStorage<T>(key: string, initialValue: T): [T, (val: T) => void] {
  const [stored, setStored] = useState<T>(() => {
    try {
      const item = localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch { return initialValue; }
  });

  const setValue = (val: T) => {
    setStored(val);
    localStorage.setItem(key, JSON.stringify(val));
  };

  return [stored, setValue];
}

useReducer typisieren

Definieren Sie Action-Typen als diskriminierte Unions und die Form des Zustands als Interface. TypeScript erzwingt dann gültige Action-Typen im Reducer.

interface State { count: number; status: 'idle' | 'loading'; }
type Action =
  | { type: 'INCREMENT' }
  | { type: 'SET_STATUS'; payload: State['status'] };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'INCREMENT': return { ...state, count: state.count + 1 };
    case 'SET_STATUS': return { ...state, status: action.payload };
  }
}

const [state, dispatch] = useReducer(reducer, { count: 0, status: 'idle' });

useCallback & useMemo typisieren

TypeScript leitet die Typen für useCallback und useMemo aus der Factory-Funktion ab. Geben Sie Typen nur dann explizit an, wenn die Ableitung fehlschlägt.

const handleChange = useCallback(
  (e: React.ChangeEvent<HTMLInputElement>) => {
    onChange(e.target.value);
  },
  [onChange]
);

const sorted = useMemo(
  () => [...items].sort((a, b) => a.name.localeCompare(b.name)),
  [items]
); // inferred as typeof items

Context-Selector-Muster mit Typen

Ein typisierter Selector-Hook erhält eine Selector-Funktion und gibt nur den benötigten Ausschnitt zurück, wobei die vollständige Typableitung erhalten bleibt.

function useAuthSelector<T>(selector: (ctx: AuthContextType) => T): T {
  const ctx = useAuth();
  return selector(ctx);
}

// Usage — TypeScript infers User | null:
const user = useAuthSelector(ctx => ctx.user);

any in Hooks vermeiden

Verwenden Sie niemals any in benutzerdefinierten Hooks. Verwenden Sie Generics, unknown mit Type Guards oder spezifische Interfaces, damit die Typkette erhalten bleibt.

// Bad:
function useFetch(url: string): { data: any; loading: boolean } { ... }

// Good:
function useFetch<T>(url: string): { data: T | null; loading: boolean } {
  const [data, setData] = useState<T | null>(null);
  // ...
  return { data, loading };
}

Kurztest

Welchen Zweck erfüllt das Guard-Hook-Muster bei der Typisierung eines React-Contexts?

Beantworte es in der interaktiven Lektion

Zusammenfassung

Typisieren Sie den Context mit einem expliziten Interface und einem Hook, der null abfängt. Geben Sie die Rückgabetypen benutzerdefinierter Hooks mit Interfaces oder Tuple-Typen an, verwenden Sie Generics für wiederverwendbare Hooks und typisieren Sie useReducer mit diskriminierten Union-Actions, um ungültige Dispatches zur Compile-Zeit zu erkennen.

Kostenlos starten

Lerne React mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 88
Lektionen: 324

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Context und Custom Hooks typisieren“ kostenlos?

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

Was lerne ich in „Context und Custom Hooks typisieren“?

Erstellen Sie typisierten Context mit Standardwerten und schreiben Sie Custom Hooks mit expliziten Rückgabetypen. Du übst React 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 React Academy zu starten?

Keine Vorkenntnisse erforderlich. React 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 4 von 4.

Wie lange dauert die Lektion „Context und Custom Hooks typisieren“?

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 React Academy-Lektion Code schreiben und ausführen?

Ja. Jede React 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

Props und Rückgabetypen von Components typisieren
Events und Refs in TypeScript typisieren
Generische Components und Utility Types
Context und Custom Hooks typisieren

← Zurück zu React Academy