React Academy · Lezione

Tipizzazione del context e dei Custom Hook

Crei un context tipizzato con valori predefiniti e scriva Custom Hook con tipi di ritorno espliciti.

Tipizzazione del context e dei Custom Hook è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Context tipizzato con createContext

Passi il tipo del context e un valore predefinito a createContext. Utilizzi null come valore predefinito quando il context deve essere usato all'interno di un provider e lo gestisca con una guardia.

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

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

Il pattern dell'hook guardia

Crei un hook personalizzato che legge il context e genera un errore se viene utilizzato al di fuori del relativo provider. In questo modo elimina i controlli su null in ogni punto di utilizzo.

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

Tipizzare il provider

Il provider racchiude i children e fornisce il valore del context. Tipizzi esplicitamente l'oggetto del valore, così TypeScript verifica che corrisponda al tipo del context.

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 con valore predefinito

Quando esiste un valore predefinito appropriato (ad esempio, un tema), lo passi direttamente a createContext, così il context non sarà mai null e non sarà necessario un hook guardia.

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

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

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

Tipizzare i valori restituiti dagli hook personalizzati

Annoti esplicitamente il tipo restituito dagli hook personalizzati oppure lasci che lo deduca TypeScript. I tipi espliciti fungono da documentazione e impediscono modifiche accidentali alla struttura.

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

Tipi restituiti come tuple

Gli hook che restituiscono una coppia (come useState) utilizzano tuple. Le tipizzi con as const o con un tipo tupla esplicito, così la destrutturazione viene dedotta correttamente.

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

Hook personalizzati generici

Anche gli hook personalizzati possono essere generici. Un hook generico useLocalStorage memorizza qualsiasi tipo serializzabile con la completa sicurezza dei tipi.

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

Tipizzare useReducer

Definisca i tipi delle action come unioni discriminate e la struttura dello state come un'interfaccia. TypeScript imporrà i tipi di action validi nel 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' });

Tipizzare useCallback e useMemo

TypeScript deduce i tipi di useCallback e useMemo dalla funzione factory. Aggiunga un'annotazione esplicita solo quando la deduzione non è corretta.

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

Pattern del context selector con i tipi

Un hook selector tipizzato accetta una funzione selector e restituisce solo la porzione necessaria, mantenendo la deduzione completa dei tipi.

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

Evitare any negli hook

Non utilizzi mai any negli hook personalizzati. Utilizzi i generici, unknown con le guardie di tipo oppure interfacce specifiche per mantenere intatta la catena dei tipi.

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

Verifica rapida

Qual è lo scopo del pattern dell'hook guardia nella tipizzazione del context React?

Riepilogo

Tipizzi il context con un'interfaccia esplicita e un hook che gestisce null. Annoti i tipi restituiti dagli hook personalizzati con interfacce o tuple, utilizzi i generici per gli hook riutilizzabili e tipizzi useReducer con action come unioni discriminate per rilevare a compile time le operazioni di dispatch non valide.

Domande Frequenti

La lezione «Tipizzazione del context e dei Custom Hook» è gratuita?

Sì — il testo completo di «Tipizzazione del context e dei Custom Hook» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Tipizzazione del context e dei Custom Hook»?

Crei un context tipizzato con valori predefiniti e scriva Custom Hook con tipi di ritorno espliciti. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Tipizzazione del context e dei Custom Hook»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Tipizzazione delle props e dei tipi restituiti dai componenti
Tipizzazione di eventi e ref in TypeScript
Componenti generici e utility type
Tipizzazione del context e dei Custom Hook

← Torna a React Academy