0Pricing
React Academy · Leçon

Typer le contexte et les hooks personnalisés

Créez un contexte typé avec des valeurs par défaut et écrivez des hooks personnalisés aux types de retour explicites.

Typer le contexte et les hooks personnalisés est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Contexte typé avec createContext

Transmettez le type du contexte et une valeur par défaut à createContext. Utilisez null par défaut lorsque le contexte doit être utilisé à l’intérieur d’un fournisseur, puis gérez ce cas avec une vérification.

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

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

Modèle de fonction de vérification

Créez une fonction personnalisée qui lit le contexte et lève une erreur si elle est utilisée en dehors de son fournisseur. Cela élimine les vérifications de nullité à chaque point d’appel.

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

Typer le fournisseur

Le composant fournisseur enveloppe les éléments enfants et fournit la valeur du contexte. Typez explicitement l’objet valeur afin que TypeScript vérifie qu’il correspond au type du contexte.

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

Contexte avec valeur par défaut

Lorsqu’une valeur par défaut pertinente existe, par exemple pour un thème, transmettez-la directement à createContext afin que le contexte ne soit jamais nul et qu’aucune fonction de vérification ne soit nécessaire.

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

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

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

Typer les valeurs de retour des fonctions personnalisées

Annotez explicitement le type de retour des fonctions personnalisées ou laissez TypeScript le déduire. Les types explicites servent de documentation et empêchent les changements accidentels de forme.

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

Types de retour en tuple

Les fonctions personnalisées qui renvoient une paire, comme useState, utilisent des tuples. Typez-les avec as const ou avec un type tuple explicite afin que la déstructuration soit correctement déduite.

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

Fonctions personnalisées génériques

Les fonctions personnalisées peuvent elles aussi être génériques. Une fonction useLocalStorage générique stocke n’importe quel type sérialisable avec un typage entièrement sûr.

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

Typer useReducer

Définissez les types d’action sous forme d’unions discriminées et la forme de l’état sous forme d’interface. TypeScript imposera ainsi des types d’action valides dans le réducteur.

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

Typer useCallback et useMemo

TypeScript déduit les types de useCallback et de useMemo à partir de la fonction de fabrique. N’annotez explicitement que lorsque l’inférence échoue.

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

Modèle de sélecteur de contexte avec typage

Une fonction de sélection typée reçoit une fonction de sélection et ne renvoie que la portion nécessaire, tout en conservant l’inférence complète des types.

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

Éviter les types trop permissifs dans les fonctions personnalisées

N’utilisez jamais any dans les fonctions personnalisées. Utilisez des génériques, unknown avec des vérifications de type ou des interfaces précises afin de préserver toute la chaîne de typage.

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

Vérification rapide

Quel est l’objectif du modèle de fonction de vérification lors du typage d’un contexte React ?

Récapitulatif

Typez le contexte avec une interface explicite et une fonction qui vérifie la nullité. Annotez les types de retour des fonctions personnalisées avec des interfaces ou des types tuple, utilisez des génériques pour les fonctions réutilisables et typez useReducer avec des actions en union discriminée afin de détecter les dispatchs invalides lors de la compilation.

Questions Fréquemment Posées

La leçon « Typer le contexte et les hooks personnalisés » est-elle gratuite ?

Oui — le texte complet de « Typer le contexte et les hooks personnalisés » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Typer le contexte et les hooks personnalisés » ?

Créez un contexte typé avec des valeurs par défaut et écrivez des hooks personnalisés aux types de retour explicites. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Academy ?

Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Typer le contexte et les hooks personnalisés » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Academy ?

Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Typer les propriétés et les types de retour des composants
  2. Typer les événements et les références dans TypeScript
  3. Composants génériques et types utilitaires
  4. Typer le contexte et les hooks personnalisés
← Retour à React Academy