React Academy · Lezione

Tipizzazione di eventi e ref in TypeScript

Utilizzi i generici React.ChangeEvent, React.MouseEvent e RefObject per le interazioni con il DOM.

Tipizzazione di eventi e ref in TypeScript è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 2 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.

Eventi sintetici di React

React racchiude gli eventi nativi del DOM in SyntheticEvent. Ogni tipo di evento ha uno specifico tipo generico: React.ChangeEvent<HTMLInputElement>, React.MouseEvent<HTMLButtonElement> e così via.

Tipizzare onChange

L'evento più comune è onChange sugli input. Tipizzi il relativo gestore con React.ChangeEvent<HTMLInputElement>.

function SearchInput() {
  const [value, setValue] = useState('');

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };

  return <input value={value} onChange={handleChange} />;
}

Tipizzare onClick

I clic sui pulsanti utilizzano React.MouseEvent<HTMLButtonElement>. Con una tipizzazione completa può accedere a e.currentTarget, e.preventDefault() e e.stopPropagation().

function DeleteButton({ onDelete }: { onDelete: () => void }) {
  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.stopPropagation();
    onDelete();
  };
  return <button onClick={handleClick}>Delete</button>;
}

Tipizzare onSubmit

L'invio di un modulo utilizza React.FormEvent<HTMLFormElement>. Chiami sempre e.preventDefault() per impedire la navigazione predefinita del browser.

function LoginForm() {
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const form = e.currentTarget;
    const email = (form.elements.namedItem('email') as HTMLInputElement).value;
    console.log(email);
  };
  return (
    <form onSubmit={handleSubmit}>
      <input name="email" />
      <button type="submit">Login</button>
    </form>
  );
}

Tipizzare gli eventi da tastiera

Utilizzi React.KeyboardEvent<HTMLElement> per tipizzare i gestori della tastiera. In questo modo può accedere in sicurezza a e.key, e.code e e.ctrlKey.

function CommandInput() {
  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter' && e.metaKey) {
      submitCommand();
    }
  };
  return <input onKeyDown={handleKeyDown} />;
}

useRef per gli elementi DOM

Passi il tipo dell'elemento HTML come tipo generico a useRef e lo inizializzi a null. TypeScript saprà quindi che il ref contiene quel tipo di elemento.

function AutoFocusInput() {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  return <input ref={inputRef} />;
}

Ref mutabile e ref DOM

Quando memorizza un valore mutabile (non un nodo DOM), inizializzi useRef con un valore anziché con null. TypeScript dedurrà un MutableRefObject mutabile.

// DOM ref (read-only current)
const divRef = useRef<HTMLDivElement>(null);

// Mutable ref (read-write current)
const countRef = useRef<number>(0);
countRef.current += 1; // ✓ no TypeScript error

Tipizzare useImperativeHandle

Quando espone un'API ref da un componente figlio, definisca un'interfaccia per l'handle e la utilizzi sia in forwardRef sia in useImperativeHandle.

interface DialogHandle {
  open: () => void;
  close: () => void;
}

const Dialog = forwardRef<DialogHandle, { title: string }>((props, ref) => {
  useImperativeHandle(ref, () => ({
    open: () => console.log('open'),
    close: () => console.log('close'),
  }));
  return <div>{props.title}</div>;
});

Callback dei ref

Una callback ref riceve l'elemento DOM oppure null. La tipizzi come (node: HTMLElement | null) => void.

function MeasureDiv() {
  const [height, setHeight] = useState(0);

  const measuredRef = (node: HTMLDivElement | null) => {
    if (node) setHeight(node.getBoundingClientRect().height);
  };

  return <div ref={measuredRef}>Content: {height}px tall</div>;
}

Event Target e Current Target

e.target è l'elemento che ha attivato l'evento; e.currentTarget è l'elemento a cui è associato il gestore. Esegua il cast di e.target quando ha bisogno di proprietà specifiche.

const handleClick = (e: React.MouseEvent<HTMLUListElement>) => {
  const target = e.target as HTMLLIElement;
  console.log(target.dataset.id);
};

Tipo generico per i gestori degli eventi

Per scrivere funzioni riutilizzabili come gestori degli eventi, utilizzi il generico React.EventHandler<Event> oppure scriva direttamente la firma completa della funzione.

type InputChangeHandler = React.ChangeEventHandler<HTMLInputElement>;

const logChange: InputChangeHandler = (e) => {
  console.log(e.target.value); // e is fully typed
};

Verifica rapida

Quale tipo TypeScript dovrebbe utilizzare per un useRef che contiene un HTMLInputElement?

Riepilogo

Tipizzi i gestori degli eventi con i generici React.ChangeEvent, React.MouseEvent e React.FormEvent. Tipizzi i ref DOM con useRef<HTMLElement>(null) e i ref mutabili con il tipo del valore. Utilizzi forwardRef con un'interfaccia dell'handle esplicita per le API imperative.

Domande Frequenti

La lezione «Tipizzazione di eventi e ref in TypeScript» è gratuita?

Sì — il testo completo di «Tipizzazione di eventi e ref in TypeScript» è 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 di eventi e ref in TypeScript»?

Utilizzi i generici React.ChangeEvent, React.MouseEvent e RefObject per le interazioni con il DOM. 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 2 di 4.

Quanto tempo richiede la lezione «Tipizzazione di eventi e ref in TypeScript»?

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