React Academy · Lektion

Typning af kontekst og custom hooks

Opret typesikker kontekst med standardværdier, og skriv custom hooks med eksplicitte returtyper.

Lektion 4 af 413 trin

Typning af kontekst og custom hooks er en gratis React Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i React Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Academy-kurset indeholder 4 lektioner i alt.

Typet kontekst med createContext

Send konteksttypen og en standardværdi til createContext. Brug null som standard, når konteksten skal bruges inden for en provider, og håndtér det med en kontrol.

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

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

Mønstret med kontrol-hooks

Opret en brugerdefineret hook, der læser konteksten og kaster en fejl, hvis den bruges uden for sin provider. Det fjerner null-kontroller ved hvert kaldested.

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

Typning af provideren

Provider-komponenten pakker children ind og leverer kontekstværdien. Typ værd i objektet eksplicit, så TypeScript kan kontrollere, at det passer med konteksttypen.

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

Kontekst med standardværdi

Når der findes en fornuftig standardværdi, f.eks. et tema, skal du sende den direkte til createContext, så konteksten aldrig er null, og der ikke er brug for en kontrol-hook.

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

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

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

Typning af returværdier fra brugerdefinerede hooks

Annotér returtypen for brugerdefinerede hooks eksplicit, eller lad TypeScript udlede den. Eksplicitte typer fungerer som dokumentation og forhindrer utilsigtede ændringer af strukturen.

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

Tupler som returtyper

Hooks, der returnerer et par, som useState, bruger tupler. Typ dem med as const eller en eksplicit tuple-type, så destrukturering udleder typerne korrekt.

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();

Generiske brugerdefinerede hooks

Brugerdefinerede hooks kan også være generiske. En generisk useLocalStorage-hook gemmer enhver serialiserbar type med fuld typesikkerhed.

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

Typning af useReducer

Definér handlingstyper som diskriminerede unioner og tilstandsstrukturen som en grænseflade. TypeScript håndhæver derefter gyldige handlingstyper i reduceren.

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

Typning af useCallback og useMemo

TypeScript udleder typer for useCallback og useMemo fra fabriksfunktionen. Annotér kun eksplicit, når inferensen fejler.

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

Mønster med kontekstvælger og typer

En typet vælger-hook tager en vælgerfunktion og returnerer kun det nødvendige udsnit, samtidig med at den fulde typeinferens bevares.

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

Undgå any i hooks

Brug aldrig any i brugerdefinerede hooks. Brug generiske typer, unknown sammen med typekontroller eller specifikke grænseflader for at bevare hele typekæden.

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

Hurtigt tjek

Hvad er formålet med mønstret med kontrol-hooks, når React-kontekst typebestemmes?

Besvar den i den interaktive lektion

Opsummering

Typ kontekst med en eksplicit grænseflade og en hook, der kontrollerer for null. Annotér returtyper for brugerdefinerede hooks med grænseflader eller tuple-typer, brug generiske typer til genbrugelige hooks, og typ useReducer med diskriminerede union-handlinger for at opdage ugyldige dispatch-kald ved kompilering.

Gratis at komme i gang

Lær React med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 88
Lektioner: 324

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Typning af kontekst og custom hooks” gratis?

Ja — hele teksten til “Typning af kontekst og custom hooks” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af React Academy-kurset, skal du opgradere til CoddyKit PRO. React Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Typning af kontekst og custom hooks”?

Opret typesikker kontekst med standardværdier, og skriv custom hooks med eksplicitte returtyper. Du øver dig i React Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på React Academy?

Der kræves ingen tidligere erfaring. React Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “Typning af kontekst og custom hooks”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne React Academy-lektion?

Ja. Alle React Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Typning af props og komponenters returtyper
Typning af events og refs i TypeScript
Generiske komponenter og utility-typer
Typning af kontekst og custom hooks

← Tilbage til React Academy