TypeScript Academy · Lezione

Tipizzazione delle props dei componenti React

Definisca le interfacce delle props e utilizzi FC o tipi di ritorno espliciti.

Tipizzazione delle props dei componenti React è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 1 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 TypeScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso TypeScript Academy include 4 lezioni in totale.

Benvenuti

In questa lezione imparerà a tipizzare le props dei componenti React con TypeScript e React.

Interfaccia delle props del componente

Definisca un'interfaccia per le props dei componenti React, così da documentare e rendere vincolante l'API del componente.

interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

function Button({ label, onClick, disabled }: ButtonProps) {
  return <button onClick={onClick} disabled={disabled}>{label}</button>;
}

FC rispetto al tipo restituito esplicito

React.FC aggiunge automaticamente children e altri tipi. Specificare esplicitamente il tipo restituito (JSX.Element | null) è spesso più chiaro.

const Card: React.FC<{title: string}> = ({ title }) => <div>{title}</div>;

// Or explicit:
function Card2({ title }: { title: string }): JSX.Element {
  return <div>{title}</div>;
}

Tipizzazione di useState

useState deduce il tipo dal valore iniziale. Specifichi un parametro di tipo quando il valore iniziale è null o ambiguo.

const [count, setCount] = useState(0);           // number
const [name, setName] = useState('');            // string
const [user, setUser] = useState<User | null>(null); // explicit

Tipizzazione di useReducer

useReducer funziona al meglio con un tipo di azione costituito da un'unione discriminata.

type Action = { type: 'increment' } | { type: 'decrement' } | { type: 'reset'; value: number };
function reducer(state: number, action: Action): number {
  switch (action.type) {
    case 'increment': return state + 1;
    case 'decrement': return state - 1;
    case 'reset': return action.value;
  }
}

Tipizzazione di useRef per il DOM

Per usare useRef con gli elementi DOM è necessario un argomento di tipo. Lo inizializzi con null, perché l'elemento non esiste ancora.

const inputRef = useRef<HTMLInputElement>(null);

// Use:
if (inputRef.current) {
  inputRef.current.focus();
}

Tipizzazione dei gestori degli eventi

I tipi degli eventi React includono React.ChangeEvent, React.MouseEvent e React.FormEvent.

function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
  console.log(e.target.value);
}
function handleClick(e: React.MouseEvent<HTMLButtonElement>) {
  e.preventDefault();
}

Componenti generici

I componenti generici accettano un parametro di tipo per creare liste e select flessibili e con sicurezza dei tipi.

function List<T extends { id: number }>({ items }: { items: T[] }) {
  return <ul>{items.map(i => <li key={i.id}>{JSON.stringify(i)}</li>)}</ul>;
}

forwardRef con TypeScript

forwardRef richiede parametri di tipo sia per il tipo dell'elemento referenziato sia per le props.

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ label, ...props }, ref) => (
    <label>{label}<input {...props} ref={ref} /></label>
  )
);

Tipi restituiti dagli hook personalizzati

Specifichi esplicitamente i valori restituiti dagli hook personalizzati per evitare che i valori restituiti dalle tuple vengano dedotti come any[].

function useToggle(init: boolean): [boolean, () => void] {
  const [state, setState] = useState(init);
  return [state, () => setState(s => !s)];
}

Context con TypeScript

Tipizzi il context React con un'unione che include undefined, così da obbligare chi lo utilizza a verificare la presenza del context.

const AuthContext = React.createContext<User | undefined>(undefined);
function useAuth(): User {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('useAuth must be used within AuthProvider');
  return ctx;
}

Verifica rapida

Qual è il tipo corretto per un ref a un elemento input HTML?

Riepilogo

Tipizzi le props React con le interfacce, useState con i parametri di tipo, gli eventi con i tipi degli eventi React, i ref con i generici degli elementi DOM e forwardRef con due parametri di tipo. I componenti generici permettono di creare interfacce utente riutilizzabili con sicurezza dei tipi.

Domande Frequenti

La lezione «Tipizzazione delle props dei componenti React» è gratuita?

Sì — il testo completo di «Tipizzazione delle props dei componenti React» è 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 TypeScript Academy, passa a CoddyKit PRO. Il corso TypeScript Academy include 4 lezioni in totale.

Cosa imparerò in «Tipizzazione delle props dei componenti React»?

Definisca le interfacce delle props e utilizzi FC o tipi di ritorno espliciti. Eserciti TypeScript 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 TypeScript Academy?

Non è richiesta alcuna esperienza precedente. TypeScript 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 1 di 4.

Quanto tempo richiede la lezione «Tipizzazione delle props dei componenti React»?

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 TypeScript Academy?

Sì. Ogni lezione TypeScript 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 dei componenti React
Tipizzazione di useState e useReducer
Tipizzazione di useRef e dei gestori degli eventi
Componenti generici e forwardRef

← Torna a TypeScript Academy